HTML表格CSS样式指南

发布时间：2023-12-08

HTML表格CSS样式指南

更新：2023-05-12 05:29 HTML表格是前端开发中经常使用的重要元素，通过合理的CSS样式设置，能够提高表格的可读性、美观度以及用户体验。下面从多个方面对HTML表格的CSS样式做详细阐述。

一、表格基本样式

1、设置表格样式

table {
    border-collapse: collapse;   /*合并边框*/
    width: 100%;                /*设置宽度为100%*/
    margin: 10px 0;             /*设置上下边距为10px*/
}

2、设置单元格样式

td, th {
    border: 1px solid #ccc;     /*设置边框*/
    text-align: center;         /*居中对齐*/
    padding: 8px;               /*设置内边距为8px*/
}
th {
    background-color: #f2f2f2;  /*设置表头背景色*/
}

二、表格额外样式

1、交替行背景色

tr:nth-child(odd) {
    background-color: #f2f2f2;  /*设置奇数行的背景色*/
}

2、鼠标悬停行背景色

tr:hover {
    background-color: #e2e2e2;  /*鼠标悬停时的背景色*/
}

3、单元格跨列和跨行

/*设置横向跨2列*/
/*设置纵向跨2行*/

三、响应式表格

1、表格自适应

table {
    width: 100%;
    overflow-x: auto;           /*水平滚动条*/
    -webkit-overflow-scrolling: touch;   /*兼容iOS弹性滚动*/
}

2、隐藏表头

.table-header {
    display: none;
}
@media screen and (min-width: 768px) {
    .table-header {
        display: table-header-group;
    }
}

注意：上面的代码中，.table-header是隐藏表头的class名称，当屏幕宽度大于等于768px时，表头才会显示出来。

四、总结

通过对HTML表格CSS样式的详细阐述，我们可以得出以下结论：对表格样式的设置能够提高表格的可读性、美观度以及用户体验。除了基本样式外，我们还可以设置交替行背景色、鼠标悬停行背景色、单元格跨列和跨行，以及实现响应式表格的自适应和隐藏表头等特殊样式。当然，不同的页面需求会有不同的表格样式设置，只有根据实际需求进行合理设置，才能达到最佳效果。

推荐文章