CODEWITHSUNDEEP
htmlcss
Clox
Clox

Reputation: 1943

Make td smaller than its content?

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

Answers (2)

Milche Patern
Milche Patern

Reputation: 20492

If you make inner div position absolute and outter td position relative, it will take inner div out of normal flow.

http://jsfiddle.net/EzKNy/2/

td {
    border:3px solid black;
    position:relative;
}
div {
    border:3px solid red;
    width:50px;
    height:50px;
    position:absolute;
}

Upvotes: 0

jokr
jokr

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

Related Questions