在我的表格中，我设置列中第一个单元格的宽度为100px。 但是，当此列中的某个单元格中的文本太长时，列的宽度就会超过100px。如何禁用此扩展?
当前回答
我用了这个
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
其他回答
凯旋的想法是对的。这是正确的代码…
<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>
我所做的是:
设置td宽度: <td width="200" height="50"><!——blaBlaBla这里的内容——></td> . txt 使用CSS设置td宽度: < td风格= "宽度:200 px;高度:50 px;" > 用CSS再次设置宽度为max和min: < td风格= " max-width: 200 px;min-width: 200 px;max-height: 50 px;最小高度:50 px;宽度:200 px;高度:50 px;" >
这听起来有点重复，但它给了我想要的结果。为了更容易地实现这一点，你可能需要把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">
将class属性放置到任何<td>。
根据我在这里的回答，也可以使用一个表头(可以是空的)，并为每个表头单元应用相对宽度。表体中所有单元格的宽度将与其列头的宽度一致。例子:
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。
我在单元格中使用::after元素，我想设置一个最小宽度，而不管当前的文本，如下所示:
.cell::after {
content: "";
width: 20px;
display: block;
}
我不需要在父表上设置宽度，也不需要使用表布局。
看到的: 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>
