固定宽度表格单元格

Question

I'm trying to make cells have a fixed (in px) width within a table.

This is what I have now:

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

However, none of the table-cells are 4px wide. What am I missing?

Answer 1

You can add a 4th <td> tag, with no width specified:

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

See the result here . The width of the first three cells is 4px, and the 4th, empty cell fills up the remaining width of the table.

Answer 2

Well, you can add buffer cells...

Example: 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;
}