CSS：表中一列的可变大小

Question

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

然后，当浏览器展开时，第一列最多可以达到50px。

是否只有CSS解决方案？我真的很想避免使用js设置这些样式。

HTML：

<table>
<tbody>
 <tr>
   <td>Item 1 expands</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
 </tr>
</tbody>
</table>

CSS：

table {
  table-layout: fixed;
}

td {
  width: 25px;
}

td:nth-child(1) {
  ?? max-width: 500px; ??
  ?? width: 25%; ??
}

Answer 1

使列平滑展开，而不是使用媒体查询捕捉到新的宽度：

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

这将允许第一列使用可用的窗口空间进行扩展。

http://jsfiddle.net/RUNcm/

这是有效的，因为如果表格的宽度低于125px，则td的min-width会启动，并让第一个孩子不会低于25px。

另一方面，如果表格宽度大于100px（因为用户展开了浏览器窗口），40%宽度将允许它上升到52px但是没有进一步的。 （max-width 125px;有助于缓和。

关于nth-child的说明：正如Jay Na所说，nth-child的浏览器支持少于first-child。您可能希望改为使用first-child伪类。

MDN文档

nth-child https://developer.mozilla.org/en-US/docs/CSS/:nth-child

first-child https://developer.mozilla.org/en-US/docs/CSS/:first-child

Answer 2

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

编辑例如：

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

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

Answer 3

你会这样做：

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