在我的表格中,我设置列中第一个单元格的宽度为100px。 但是,当此列中的某个单元格中的文本太长时,列的宽度就会超过100px。如何禁用此扩展?


当前回答

根据我在这里的回答,也可以使用一个表头(可以是空的),并为每个表头单元应用相对宽度。表体中所有单元格的宽度将与其列头的宽度一致。例子:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

查看结果

或者,按照Hyathin的回答建议使用colgroup。

其他回答

根据我在这里的回答,也可以使用一个表头(可以是空的),并为每个表头单元应用相对宽度。表体中所有单元格的宽度将与其列头的宽度一致。例子:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

查看结果

或者,按照Hyathin的回答建议使用colgroup。

如果对表的访问受限,那么使用类或内联样式可能会比较复杂。

或者你也可以瞄准每一行的第一个td和第th个子元素(也就是第一列)

当我用width测试它时,下面的规则对我有用,但由于某种原因,max-width不适用:

thead, tbody tr {
            
    display:table;
    width:100%;
    table-layout:fixed;
}

tr th:first-child, tr td:first-child {
                
    width:100px;
}

设置:

style="min-width:100px;" 

为我工作。

如果您需要一个或多个固定宽度的列,而其他列需要调整大小,请尝试将min-width和max-width设置为相同的值。

看到的: http://www.html5-tutorials.org/tables/changing-column-width/

在table标记之后,使用col元素。不需要结束标记。

例如,如果你有三列:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>