具有固定大小的第一列和相同大小的其余列的 Html 表答案

【问题标题】：Html table with first column of fixed size and remaining columns equal size具有固定大小的第一列和相同大小的其余列的 Html 表
【发布时间】：2019-02-11 10:20:35
【问题描述】：

我的表有一个标题列和剩余的数据列。我希望有以下内容：

表格占屏幕宽度的 100%。
第一列的宽度固定为 150 像素。

其余列的宽度均分。我已经发布了我的代码 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>

感谢任何帮助。

【问题讨论】：

标签： html css html-table

【解决方案1】：

您只需为每个 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 网格。

【讨论】：

【解决方案2】：

您应该将 th 用于标题单元格：

<table>
  <tr>
    <th>Number</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

对于css：

table {
    width:100%;
}
th {
    width:150px;
} 
td {
   width: auto;
}

你也可以省略td的css，因为'width'默认是'auto'。

【讨论】：

【解决方案3】：

您可以添加 'table-layout:fixed;'到 #my-table 并使用样式属性或通过 css 属性设置第一列的宽度。

<table id="my-table">
    <tr>
        <td style="width: 150px;"> 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>

#my-table {
  width:100%;
  border-collapse:collapse;
  table-layout: fixed;
}

#my-table td {
  padding:4px;
  border:1px solid #000;
  vertical-align:top;
}

【讨论】：