html - CSS:表格中一列的可变大小

Question

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

然后当浏览器展开时，第一列最多可以变成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 就会起作用，并防止第一个 child 低于 25px.

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

关于 nth-child 的注意事项: 正如 Jay Na 所说，nth-child 的浏览器支持少于 first-child。您可能想改用 first-child 伪类。

MDN 文档

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

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