要使用CSS控制表格的边框,宽度和高度,可以使用以下属性:
border
属性用于设置表格的边框,包括边框的样式、宽度和颜色。例如,使用 border: 1px solid #000;
可以设置表格的边框为 1 像素宽的黑色实线边框。
border-collapse
属性用于设置表格边框的合并方式。例如,使用 border-collapse: collapse;
可以将相邻的边框合并成一个边框。
width
属性用于设置表格的宽度。例如,使用 width: 100%;
可以将表格的宽度设置为父容器的宽度。
height
属性用于设置表格的高度。例如,使用 height: 100px;
可以将表格的高度设置为 100 像素。
padding
属性用于设置单元格内部的填充。例如,使用 padding: 10px;
可以在单元格内部添加 10 像素的填充。
text-align
属性用于设置单元格中内容的水平对齐方式。例如,使用 text-align: center;
可以将单元格中的内容居中对齐。
vertical-align
属性用于设置单元格中内容的垂直对齐方式。例如,使用 vertical-align: middle;
可以将单元格中的内容垂直居中对齐。
下面是一个例子,展示如何使用这些属性来设置表格的样式:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
vertical-align: middle;
}
th {
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
其中,th
和 td
分别代表表格的表头和单元格。tr:nth-child(even)
用于设置偶数行的背景色为灰色。