在我的表格中,我设置列中第一个单元格的宽度为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>
推荐文章
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 设备像素比到底是什么?
- 我如何做一个半透明的背景?
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在CSS网格布局中等高行
- $(window).width()与媒体查询不一样
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
- 如何以及在哪里使用::ng-deep?
- Angular 2模板中的标签是什么意思?