css table根据某一列撑开行高

CSS table 可以实现很多布局的需求，其中一个常见的需求是根据某一列撑开行高。下面来介绍一下如何实现这个需求。

姓名	年龄	爱好
张三	20	打篮球、听音乐、看电影
李四	25	跑步、踢足球、看书
王五	30	游泳、爬山、旅游、摄影、...（爱好很多）

假设上面的表格就是我们要实现的效果，其中的第三列爱好内容较多，需要根据这一列来撑开行高。

table {
  border-collapse: collapse;
}

td,th {
  border: 1px solid #ccc;
  padding: 10px;
}

/* 通过定位来撑开行高 */
td:nth-child(3) {
  position: relative;
}

td:nth-child(3)::before {
  content: "";
  position: absolute;
  top: -9999px;
  left: -9999px;
  white-space: Nowrap;
  padding: 10px;
}

td:nth-child(3)::before {
  content: attr(data-value);
}

td:nth-child(3) {
  white-space: Nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上面的 CSS 代码实现了根据第三列内容来撑开行高的效果。具体来说，我们在第三列的单元格中添加了一个伪元素，并设置其 position 为 absolute，使其不占据文档流。然后将该伪元素的 content 属性设置为单元格的内容，以便获取其宽度。

接着，给该单元格设置 white-space: Nowrap，让其不换行，同时设置 overflow: hidden 和 text-overflow: ellipsis，让其超出部分以省略号的形式显示。这样就可以用纯 CSS 实现根据某一列撑开行高的效果了。