css table 列的宽度自适应宽度

CSS Table一般用来展示数据，但是如果列的宽度不自适应，就会影响展示效果。如何让CSS Table的列自适应宽度呢？

首先，我们需要了解几种情况。

//情况1：所有列都有相同的宽度
table {
    table-layout: fixed; //强制所有单元格具有相同的宽度
}
td {
    width: 33.33%; //三列均分宽度
}

//情况2：列宽根据内容自适应
table {
    table-layout: auto; //根据单元格内容自适应宽度
}
td {
    width: auto; //自适应宽度
}

//情况3：列宽固定，但总宽度自适应
table {
    width: 100%; //表格宽度填满父元素
    table-layout: fixed; //强制所有单元格具有相同的宽度
}
td {
    width: 100px; //每列固定100px
}

通过这些基础的CSS样式设置，我们可以自适应CSS Table的列宽度，使其更加美观清晰。