Html “最大宽度”不适用于表格单元格

我有一个表，每行有3个单元格。这是我的CSS：

table.result {
  width: 100%;
}

.result td:nth-child(3n+1) {
  width: 10%;
  max-width: 50px;
}

.result td:nth-child(3n+2) {
  width: 33%;
  max-width: 150px;
}

表格的第一个单元格宽度为

10%

（

187px

），第二个

td

为

33%

（

618px

），设置

最大宽度

不起作用

这个想法是要有一个100%宽度的表格，第三个单元格有剩余的宽度

table.result{
宽度：100%；
}
.结果td:n个孩子（3n+1）{
宽度：10%；
最大宽度：50px；
}
.结果td:n个孩子（3n+2）{
宽度：33%；
最大宽度：150px；
}

一行
名称
描述

您可以尝试使用Flex调整每个表元素的宽度。 您可以在此处找到更多信息：

---

通过在每个单元格中添加一个

div

，并在其上使用

max/min width

，您可以更好地控制单元格，下面是一个示例

table.result{
宽度：100%；
}
.结果td:n个孩子（3）{
宽度：100%；
}
.结果td:N个儿童（1）分区{
最小宽度：40px；
最大宽度：50px；
}
.结果td:N个儿童（2）分区{
最小宽度：100px；
最大宽度：150px；
}

一行
名称
描述

请单击

并创建一个@mplungjan，我添加了该片段。

最大宽度

对表格单元格不起作用。添加一个内部元素，即a

div

，然后给它一个

max width

@LGSon，那么如何防止表单元格增长？如果给额外的元素一个50px的最大宽度，它不会增长，那么单元格也不会增长。还是我误解了你？