HTML CSS 表格，固定和自动调整

Question

我需要一些关于表格的帮助，我有:

<table>
    <tr>
        <th>Title</th>
        <td>Content</td>
        <th>Title</th>
        <td>Content</td>
    </tr>
</table>

我希望我的 th 都是固定的，所以假设 200px，我希望我的内容是自动调整的，但大小相同，我的 td 上的内容是动态的，所以我不知道会有很多内容还是什么都没有，我只想让 td 填充可用空间并分享空间。所以如果有 600px 可用，我希望我的 td 为 300px。 这可能吗？

Answer 1

给你的 table 一个固定的table-layout它会做到这一点。您的 th 元素将是 200px 宽，而您的 td 元素将被迫填充剩余空间。如果您的表格宽度为 1000 像素，您的两个 td 元素将自动调整为每个 300 像素。

table {
    width:1000px;
    table-layout:fixed;
}

th {
    width:200px;
}

JSFiddle example .