在我的表格中，我将列中第一个单元格的宽度设置为100px.
但是，当该列中的一个单元格中的文本太长时，该列的宽度会变得超过100px. 我怎么能禁用这个扩展？
问问题
1175034 次
16 回答
697
我玩了一会儿，因为我很难弄清楚。
您需要设置单元格宽度（th或者td工作，我都设置了）table-layout并将fixed. 出于某种原因，单元格宽度似乎只有在设置了表格宽度时才保持固定（我认为这很愚蠢，但无论如何）。
overflow此外，将属性设置hidden为防止任何额外的文本从表格中出来也很有用。
您也应该确保为 CSS 保留所有边框和大小。
好的，这就是我所拥有的：
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th,
td {
border: 1px solid black;
width: 100px;
overflow: hidden;
}<table>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>这家伙有一个类似的问题：表格单元格宽度 - 固定宽度，换行/截断长词
于 2010-12-16T06:04:31.613 回答
214
见： http ://www.html5-tutorials.org/tables/changeing-column-width/
在 table 标记之后，使用 col 元素。你不需要结束标签。
例如，如果您有三列：
<table>
<colgroup>
<col style="width:40%">
<col style="width:30%">
<col style="width:30%">
</colgroup>
<tbody>
...
</tbody>
</table>
于 2013-04-08T16:15:47.670 回答
143
只需在里面添加<div>标签<td>或在里面<th>定义宽度<div>。这将对您有所帮助。没有其他工作。
例如。
<td><div style="width: 50px" >...............</div></td>
于 2012-05-06T22:25:09.647 回答
73
如果您需要一个或多个固定宽度的列，而其他列应该调整大小，请尝试将两者min-width和设置max-width为相同的值。
于 2012-09-06T12:28:07.490 回答
36
你需要在相应的 CSS 里面写这个
table-layout:fixed;
于 2010-12-16T04:47:33.177 回答
26
我要做的是：
设置 td 宽度：
<td width="200" height="50"><!--blaBlaBla Contents here--></td>使用 CSS 设置 td 宽度：
<td style="width:200px; height:50px;">使用 CSS 再次将宽度设置为最大和最小：
<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">
这听起来有点重复，但它给了我想要的结果。为了更轻松地实现这一点，您可能需要将 CSS 值放在样式表中的一个类中：
.td_size {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
**overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/
}
然后：
<td class="td_size">
将类属性放置到任何<td>您想要的位置。
于 2012-06-26T05:31:57.077 回答
5
设置这个：
style="min-width:100px;"
为我工作。
于 2019-05-30T08:47:55.547 回答
3
如果您不想要固定布局，请为列指定一个类以适当地调整大小。
CSS：
.special_column { width: 120px; }
HTML：
<td class="special_column">...</td>
于 2012-03-24T04:21:04.783 回答
3
我用这个
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
于 2013-05-10T21:40:41.507 回答
3
当小于固定宽度时，使接受的答案响应小屏幕。
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小提琴
于 2017-06-03T14:38:15.303 回答
3
根据我在这里的回答，也可以使用表头（可以为空）并为每个表头单元格应用相对宽度。表格主体中所有单元格的宽度将与其列标题的宽度一致。例子：
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;
}
或者，colgroup按照 Hyathin 的回答中的建议使用。
于 2018-11-02T14:52:28.493 回答
2
使用width:auto放入最后一个“填充单元”也有帮助。这将占用剩余空间，并将保留指定的所有其他维度。
于 2015-05-04T08:19:49.677 回答
1
KAsun 的想法是正确的。这是正确的代码...
<style type="text/css">
th.first-col > div,
td.first-col > div {
overflow:hidden;
white-space:nowrap;
width:100px
}
</style>
<table>
<thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
<tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
于 2012-07-11T00:35:14.313 回答
1
我在要设置最小宽度的单元格中使用 ::after 元素，而不管文本是否存在，如下所示：
.cell::after {
content: "";
width: 20px;
display: block;
}
我不必在父表上设置宽度，也不必使用表布局。
于 2019-12-16T08:37:00.817 回答
-4
我发现 KAsun 的答案使用vw而不是px效果更好，如下所示：
<td><div style="width: 10vw" >...............</div></td>
这是我调整列宽所需的唯一样式
于 2016-09-19T00:36:01.360 回答
-5
您不需要设置"fixed"-overflow:hidden因为设置了列宽，所以您只需要设置。
于 2013-09-09T09:07:40.923 回答