Set fixed TD height?

Question

<table>
    <tr>
        <td>4px</td>
        <td>4px</td>
        <td>4px</td>
    </tr>
    <tr>
        <td colspan="3">content</td>
    </tr>
    <tr>
        <td>4px</td>
        <td>4px</td>
        <td>4px</td>
    </tr>
</table>

I can't set the td's to 4px height using CSS.

Answer 1

set the row's height.

Answer 2

tr {
    height: 4px
}

You can't set the height of individual cells, otherwise you'd have some pretty wacko rows.

Answer 3

<td>style="height:4px;"</td>

or...

<table>
    <tr>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
    </tr>
</table>​​​​

/* style sheet */
.smallCell
{
    height: 4px;
}

They won't shrink to 4px if you have text or some other element inside them which is too large though.

Answer 4

TD's always expand to accommodate the content. So if your TD is to be 4px, your content inside will have to be 4px or less as well.

Consider TD dimensions as min-width/min-height in concept.

Answer 5

Firstly, you cannot define a css class that starts with a number. Your rules dont apply because you set a class of "4px". Please validate.

Secondly, define a font-size so the font doesn't exceed four pixels.

​Thirdly, if this isn't tabular data do not use a table for the job. See http://www.hotdesign.com/seybold/

HTML:

<table cellspacing="0" cellpadding="0" width="100%">
    <tr class="four-px">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="3">content</td>
    </tr>
    <tr class="four-px">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

​

CSS:

table, tr, td { background:#dd0;}
tr.four-px { height:4px;  }
tr.four-px td { background:#ff9; font-size:4px; line-height:1; }

Live Demo: http://jsfiddle.net/D9pm9/11/

Live Demo with text inside rows: http://jsfiddle.net/D9pm9/12/

Answer 6

I don't think you can size a row to 4px if there is text in it. You can, however, resize the text inside the td itself to shrink the cells:

<table>
    <tr>
        <td style="font-size: 4px;">4px</td>
        <td style="font-size: 4px;">4px</td>
        <td style="font-size: 4px;">4px</td>
    </tr>
    <tr>
        <td colspan="3">content</td>
    </tr>
    <tr>
        <td style="font-size: 4px;">4px</td>
        <td style="font-size: 4px;">4px</td>
        <td style="font-size: 4px;">4px</td>
    </tr>
</table>