html - HTML表格的第一列固定大小，其余列大小相等

我的表有一个标题列和其余数据列。
我希望有以下几点：


该表占用屏幕宽度的100％。
第一列的固定宽度为150px。
其余列的宽度均分。
我已经发布了我的代码here

#my-table{width:100%;border-collapse:collapse;} /*or whatever width you want*/
#my-table td{width:2000px;padding:4px;border:1px solid #000;vertical-align:top;} /*something big or 100%*/
#my-table td:first-child {width:150px;padding:4px;border:1px solid #000;vertical-align:top;} 

<table id="my-table"><tr>
    <td> CELL 1 Whith a lot of text in it</td>
    <td> CELL 2 </td>
    <td> CELL 3 </td>
    <td> CELL 4 Whith a lot of text in it </td>
    <td> CELL 5 </td>
    </tr></table>

任何帮助表示赞赏。

最佳答案

您需要为每个td标签分配以下内容。

这样，您可以指定哪一列获得更多空间。

<td style="width:60%">... </td>
<td style="width:150px">... </td>

浏览器将处理其余的工作。

要强制宽度，您可以使用

<td style="width: calc((100% - 150px)/5)">... </td> <!-- width is on fifth of remaining area -->

请注意，还有其他解决方案，例如CSS网格。

关于html - HTML表格的第一列固定大小，其余列大小相等，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54628302/