设置固定的TD高度？

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>

我不能使用CSS将td设置为4px高度。

Answer 1

首先， 您不能定义以number开头的css类 。 您的规则不适用，因为您将类别设置为“ 4px”。 请验证。

其次， 定义字体大小，以使字体不超过四个像素 。

第三， 如果不是表格数据，请不要使用表格进行作业 。 参见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; }

现场演示 ： http : //jsfiddle.net/D9pm9/11/

行内包含文本的实时演示 ： http : //jsfiddle.net/D9pm9/12/

Answer 2

设置行的高度。

Answer 3

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

要么...

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

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

如果其中包含文本或其他太大的元素，它们将不会缩小到4px。

Answer 4

TD始终会扩展以容纳内容。 因此，如果您的TD为4px，则内部内容也必须为4px或更小。

在概念上，将TD尺寸视为最小宽度/最小高度。

Answer 5

我认为如果其中有文字，则无法将行大小设置为4px。 但是，您可以在td本身中调整文本大小以缩小单元格：

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