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


当前回答

看到的: 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>

其他回答

这也有助于,在最后一个“填充单元格”,宽度:auto。这将占用剩余空间,并保留指定的所有其他维度。

设置:

style="min-width:100px;" 

为我工作。

如果不想要固定的布局,请指定一个类,使列的大小适当。

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

使接受的答案响应小屏幕时,小于固定宽度。

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS小提琴

https://jsfiddle.net/w9s3ebzt/

您需要在相应的CSS中编写这些内容

table-layout:fixed;