Saturday, 24 August 2013

How to hide a larger element inside a table cell - CSS

How to hide a larger element inside a table cell - CSS

I have a <table> with 3 cells (<td>), each cell with 150px width and 100px
height. I placed a <a> having height 100px, width 200px, display:block,
inside a cell. But then the table cell resized into 200px showing the
entire div. But I just want to see only a portion of div and the cell may
remain as such, 150px wide.
html;
<table class="mytable">
<td class="cell">
<a class="wrapper">sometext</a>
</td>
<td class="cell">aa</td>
<td class="cell">bb</td>
</table>
css;
.mytable{
table-layout:fixed;
}
.mytable tr td{
width: 150px;
height: 100px;
overflow: hidden;
}
.wrapper{
display: block;
width: 200px;
height: 100px;
}
How can I do this?

No comments:

Post a Comment