css表格样式如何设置

css表格样式如何设置

css表格样式可以通过以下方式设置：

1、设置表格边框样式：

“`css

table {

border-collapse: collapse; /* 合并表格边框 */

border: 1px solid #ccc; /* 设置表格边框 */

}

“`

2、设置表格单元格样式：

“`css

td {

padding: 10px; /* 设置单元格内边距 */

text-align: center; /* 设置单元格文本居中 */

border: 1px solid #ccc; /* 设置单元格边框 */

}

“`

3、设置表格标题样式：

“`css

th {

font-weight: bold; /* 设置标题加粗 */

background-color: #f2f2f2; /* 设置标题背风景 */

border: 1px solid #ccc; /* 设置标题边框 */

}

“`

4、设置表格行间隔样式：

“`css

tr:nth-child(even) {

background-color: #f2f2f2; /* 设置偶数行背风景 */

}

“`

5、设置表格列宽样式：

“`css

td {

width: 100px; /* 设置单元格宽度 */

}

“`

6、设置表格样式类：

“`css

.table-style {

border-collapse: collapse;

border: 1px solid #ccc;

}

.table-style td {

padding: 10px;

text-align: center;

border: 1px solid #ccc;

}

.table-style th {

font-weight: bold;

background-color: #f2f2f2;

border: 1px solid #ccc;

}

.table-style tr:nth-child(even) {

background-color: #f2f2f2;

}

.table-style td {

width: 100px;

}

“`

以上是一些常见的CSS表格样式设置方法，可以根据实际需求进行调剂。

本文来源：https://www.yuntue.com/post/73494.html | 云服务器网，转载请注明出处！