1

我正在尝试使单元格在表格中具有固定的（以 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 宽。我错过了什么？

4

2 回答 2

3

您可以添加第 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，第 4 个空单元格填满了表格的剩余宽度。

于 2013-08-21T20:27:37.797 回答
0

好吧，你可以添加缓冲细胞......

示例：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;
}
于 2013-08-21T20:32:54.370 回答