Reputation: 1943
Is there any way at all to make a table-cell smaller than its contents using purely css, and without altering the DOM? Setting the width of a td to smaller than its child only makes it as large as its child for me. I also tried adding table-layout:fixed to the table but that didn't make any difference.
HTML:
<table>
<tr>
<td><div/></td>
<td class="mycell"><div/></td>
<td><div/></td>
</tr>
CSS:
table {
table-layout:fixed;
}
td {
border:3px solid black;
}
div {
border:3px solid red;
width:50px;
height:50px;
}
.mycell {
width:20px;
jsfiddle:
http://jsfiddle.net/clox/EzKNy/
Upvotes: 4
Views: 14749
Reputation: 20492
If you make inner div position absolute and outter td position relative, it will take inner div out of normal flow.
td {
border:3px solid black;
position:relative;
}
div {
border:3px solid red;
width:50px;
height:50px;
position:absolute;
}
Upvotes: 0
Reputation: 242
Yes, that is possible. But you have to use the value max-width
instead. So it reads:
.mycell {
max-width: 20px;
}
Upvotes: 6