固定宽度表格单元格

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>

在这里查看结果。 前三个单元格的宽度为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;
}