html - 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-layout，它会做到这一点。你的th元素将是 200px 宽，你的td元素将被强制填充剩余的空间。如果您的表格是 1000 像素宽，那么您的两个td元素会自动调整为 300 像素。

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

th {
    width:200px;
}

JSFiddle 示例。