Set fixed TD height?

<table>
    <tr>
        <td>4px</td>
        <td>4px</td&开发者_StackOverflow中文版gt;
        <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.

---

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/

---

set the row's height.

---

<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.

---

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.

---

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>