以下是一个示例代码,演示如何使用CSS来实现表格列与表头均匀显示:
HTML代码:
表头1
表头2
表头3
内容1
内容2
内容3
内容4
内容5
内容6
CSS代码:
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
th, td {
text-align: center;
padding: 10px;
border: 1px solid black;
white-space: nowrap;
}
th {
background-color: lightgray;
font-weight: bold;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
在上面的示例中,我们使用了CSS的table-layout: fixed;
属性来指定表格的布局方式为固定宽度。这样可以确保表格的列宽度均匀分配。
同时,我们还使用了white-space: nowrap;
属性来防止单元格内容换行,以确保表格列宽度不会因为内容过多而自动调整。
其他样式设置包括居中对齐表头和单元格内容、设置表头背景色、设置奇偶行的背景色等。
通过以上代码,可以实现表格列与表头均匀显示的效果。
下一篇:表格列越界