Question

我正在尝试让单元格在表格中具有固定的（以px为单位）宽度。

这就是我现在所拥有的：

        <table style="border: 1px solid black; width: 1128px; table-layout: fixed;">
            <tbody>
              <tr>
                <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 1</td>
                <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 2</td>
                <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 3</td>
              </tr>
            </tbody>
        </table>

然而，没有一个表格单元是4px宽。我错过了什么？

Answer 1

您可以添加第4个<td>标记，但不指定宽度：

<table style="border: 1px solid black; width: 1128px; table-layout: fixed;">
    <tbody>
        <tr>
            <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 1</td>
            <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 2</td>
            <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 3</td>
            <td></td>
        </tr>
    </tbody>
</table>

查看结果here。前三个单元格的宽度为4px，第四个空单元格的宽度填满了表格的剩余宽度。

Answer 2

好吧，你可以添加缓冲区......

示例：http://jsfiddle.net/YGRGG/

HTML

<table>
    <tbody>
        <tr>
            <td></td>
            <td>Row 1 Col 1</td>
            <td></td>
            <td>Row 1 Col 2</td>
            <td></td>
            <td>Row 1 Col 3</td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid black;
    width: 1128px;
}
table td:nth-of-type(2),
table td:nth-of-type(4),
table td:nth-of-type(6) {
    width:4px;
}

固定宽度表格单元格

2 个答案: