css table自适应列宽

CSS表格自适应列宽是实现网站响应式布局的重要技术之一，在开发中经常会用到，本文将为大家简单介绍实现CSS表格自适应列宽的方法。

table {
  width: 100%;
  table-layout: fixed;
}

th,td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

当我们要实现一个响应式布局的表格时，需要让表格的列宽可以根据不同设备尺寸的屏幕自适应调整。这里我们需要将表格的宽度设置为100%以让其占满父容器的宽度，并且将表格布局方式设置为fixed以使表格可以自适应调整列宽。

接下来，我们还需要给表格里的每个单元格设置一些样式，包括填充、对齐和边框等等。在上面的代码中，我们对表头和表格内容分别设置了一些样式，这样可以让表格更美观和易于阅读。

最后，我们还可以对表头单元格设置背景色，以区分表头和表格内容。

通过上面的CSS代码，我们就可以实现一个简单的CSS表格自适应列宽的效果。如果您需要更加高级的表格样式，可以通过加入其他样式属性来实现。