Html CSS：表中一列的可变大小

我想要一个100px的表，有4列，每列25px

然后，当浏览器展开时，第一列最多可以变成50px

是否有一个CSS唯一的解决方案？我真的希望避免使用js来设置这些样式

HTML:

---

你可以这样做：

@media all and (min-width:400px) { /* or whatever the threshold size is */
    td:first-child {width:50px}
}

---

在要修复的TD元素上设置一个25px的值。从那时起，表的宽度将定义第一列的宽度，因此您可以定义它

编辑例如：

table {
    max-width:575px;
}
td {
  width: 25px;
}

td:nth-child(1) {
width:auto;
}

---

要使列平滑展开，而不是通过媒体查询捕捉到新的宽度，请执行以下操作：

table{ 
  max-width: 125px;
}
td{
   min-width: 25px;
}
td:nth-child(1){
   width:40%; // Translates to roughly 50px
}

这将允许第一列使用可用的窗口空间展开

这是因为如果表格的宽度低于

125px

，则td的

min width

将起作用，并防止第一个子项低于

25px

另一方面，如果表格的宽度大于

100px

（因为用户扩展了浏览器窗口），

40%

宽度将允许表格上升到

52px

，但不会再上升。（这就是

最大宽度125px；

有助于缓和）

关于第n个孩子的注意事项：正如Jay Na所说，

n个孩子

比第一个孩子的浏览器支持少。您可能需要考虑改用

第一个子类

伪类

MDN文档

n个子项

---

first child

最小宽度：25px

，

最大宽度：50px

，

宽度：25%

是否有特殊原因将表格本身限制为100px宽？如果单元格都被钳制为25px，那么默认情况下该表的宽度应为100px。我正在重写设置

宽度的样式：auto

，不幸的是，我必须在此项目的其他人员组件之上构建。也许我应该试试

width:default

？什么是“浏览器已扩展”的确切含义？@DonnyP在这种情况下没有必要覆盖

width:auto

。表希望尽其内容所能的小，而auto不会以任何方式干扰它。但是wil什么时候会改变大小呢？在这种方法中，它将始终保持52px。那么您现在不设置表的大小吗？我想你应该试一试这个，我很乐意。上帝保佑！回答得很好。最好使用：first child for more browser Support我对此进行了测试，但它不起作用：（第一列保持折叠状态，并根据其内容展开。

table {
    max-width:575px;
}
td {
  width: 25px;
}

td:nth-child(1) {
width:auto;
}

table{ 
  max-width: 125px;
}
td{
   min-width: 25px;
}
td:nth-child(1){
   width:40%; // Translates to roughly 50px
}