使用CSS实现响应式表格列宽自适应效果的方法如下:
table { table-layout: fixed; }
th, td { width: 20%; }
,其中20%可以根据实际需要进行调整。word-wrap: break-word;
来实现单元格内容自动换行。overflow-x: auto;
来实现表格横向滚动。示例代码如下:
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
th, td {
width: 20%;
padding: 8px;
border: 1px solid #ccc;
word-wrap: break-word;
}
thead {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
@media screen and (max-width: 600px) {
th, td {
width: 100%;
display: block;
}
}
关键词高亮:table-layout: fixed;
、百分比、word-wrap: break-word;
、overflow-x: auto;
、@media screen and (max-width: 600px)
。