在 CSS 中,可以使用 width
属性来设置表格列的宽度。可以为每个表格列指定一个固定的宽度值,也可以为一组表格列指定一个相对宽度值。
为每个表格列指定固定宽度值:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
width: 150px; /* 每个表格列的宽度均为 150px */
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
为一组表格列指定相对宽度值:
table {
width: 100%;
border-collapse: collapse;
}
th:first-child,
td:first-child {
width: 20%; /* 第一列的宽度为表格宽度的 20% */
}
th:last-child,
td:last-child {
width: 80%; /* 最后一列的宽度为表格宽度的 80% */
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
其中,width
属性可以取值为固定的长度值,如 px
、em
、rem
等,也可以取值为相对长度值,如百分比 %
等。在设置表格列宽度时,需要注意表格的 border-collapse
属性,如果值为 collapse
,则需要在 th
和 td
上设置 border
属性,否则可能会出现列宽不准确的情况。