使用 CSS 控制表格样式和列宽度的方法:
可以使用以下 CSS 属性来控制表格样式:
border
:表格边框;border-collapse
:表格边框合并;background-color
:表格背景色;color
:表格文本颜色;font-size
:表格文字大小;text-align
:表格文本对齐方式。例如,设置表格边框为 1 像素的实线,表格背景色为浅灰色,表格文本颜色为黑色,表格文字大小为 14 像素,表格文本水平居中对齐,代码如下:
table {
border: 1px solid #000;
border-collapse: collapse;
background-color: #f2f2f2;
color: #000;
font-size: 14px;
text-align: center;
}
可以使用以下 CSS 属性来控制表格列宽度:
width
:指定列宽度;min-width
:指定列最小宽度;max-width
:指定列最大宽度。例如,设置第一列的宽度为 100 像素,第二列的最小宽度为 50 像素,第三列的最大宽度为 200 像素,代码如下:
table td:first-child {
width: 100px;
}
table td:nth-child(2) {
min-width: 50px;
}
table td:nth-child(3) {
max-width: 200px;
}
需要注意的是,设置列宽度时需要将表格的 table-layout
属性设置为 fixed
,例如:
table {
table-layout: fixed;
}
这样可以使得列宽度固定,不会随着内容的变化而改变。