css中单元格宽度自适应

CSS中单元格的宽度是我们常常需要掌握的技巧之一。在表格中，单元格通常是用来展示数据的，而如何让单元格的宽度适应不同的内容，是一个需要我们不断研究的问题。

/* 让表格单元格的宽度自适应 */
table {
  width: 100%;
  table-layout: fixed;
}

/* 关闭单元格与边框之间的间隙 */
td,th {
  padding: 0;
}

/* 使用单元格内容作为宽度 */
td.wrap,th.wrap {
  white-space: Nowrap;
}
td.wrap {
  overflow: hidden;
  text-overflow: ellipsis;
}

以上代码可以实现让表格单元格的宽度自适应不同的内容。在样式表中，我们首先将表格的宽度设置为100%，然后使用table-layout属性将表格的布局方式设置为fixed。这种方式可以让表格单元格根据内容自动调整宽度，而不受其他因素的影响。

接着，我们关掉了单元格与边框之间的间隙，从而让单元格的宽度更加紧凑。然后使用.white-space属性，禁止单元格内容进行换行，这样才能真正实现让单元格的宽度自适应。同时，我们使用了overflow和text-overflow属性，使单元格内容超出宽度时呈现省略号的形式，这样既能充分展示重要的信息，又不会影响整个表格的排版效果。