Question

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

该表占用屏幕宽度的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>

感谢您的协助。

Answer 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网格。

Answer 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;
}

您也可以省略ts的css，因为默认情况下'width'是'auto'。

Answer 3

您可以添加'table-layout：fixed;'到＃my-table，并使用style属性或通过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;
}

具有固定大小的第一列且其余列相等大小的HTML表格

3 个答案: