我有下表，每个单元格中的内容宽度不同。我想要 nowrap 和 overflow 旁边的 long。
我尝试了这里提到的内容:Why does overflow:hidden not work in a <td>?
但结果是所有单元格的宽度都相同，我需要单元格调整到内部内容，所以在内容较短的单元格(例如复选框单元格)中没有那么多的腰部空白。
我不能改为应用 div，而且我不能为每一列应用特定的宽度，因为它是一个动态表格，所以列数和内容可能会改变。
¿任何线索？
这是代码。查看example at JSfiddle
<html>
<head>
<style>
table {
width: 100%;
}
table td {
border: 1px solid #ccc;
max-width: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
ID001
</td>
<td>
Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-
</td>
</tr>
</table>
</body>
</html>
最佳答案
table {
width: 100%;
table-layout: fixed;
width: 100%;
}
table td:nth-of-type(1) {
width: 20px;
padding: 5px 0;
}
table td:nth-of-type(2) {
width: 100px;
}
table td {
border: 1px solid #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 5px 10px;
}<table>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
ID001
</td>
<td>
Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-
</td>
</tr>
</table>关于html - 自动将单元格宽度调整为 CSS 中的内容并溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43785175/