你不需要设置“fixed”-你只需要设置overflow:隐藏，因为列宽度已经设置好了。

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

table-layout:fixed;

我发现凯旋的答案使用vw而不是px更好，就像这样:

< td > < div =“宽度:10大众风格 " >...............</ div > < / td >

这是我调整列宽度所需要的唯一样式

设置:

style="min-width:100px;" 

为我工作。

我在单元格中使用::after元素，我想设置一个最小宽度，而不管当前的文本，如下所示:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

我不需要在父表上设置宽度，也不需要使用表布局。

在餐桌上找到合适的尺寸是很棘手的。唯一对我有效的方法是使用表格布局:fixed;与每条线的指定宽度相结合。和宽度:auto;在你不介意生长的一列上。

下面是一个使用无类表的示例。如果您正在处理一些动态列，则需要一个类化版本。

table { table-layout: fixed; } th,td { text-align: left; vertical-align: top; /* use this in the columns where you're not concerned with new lines */ word-break: break-word; } th:first-child, th:last-child { width: 5ch; text-align: center; } th:nth-child(n + 2):nth-child(-n + 3) { background: red; width: 25%; } th:nt-child(4) { background: blue; width: auto; } <table> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Description</th> <th>Age</th> </tr> </thead> <tbody> <tr> <th>1</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>2</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>3</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> <tr> <th>4</th> <th>John</th> <th>Smith</th> <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th> <th>30</th> </tr> </tbody> </table>