CSS表格可以讓我們快速實(shí)現(xiàn)網(wǎng)站頁面上的數(shù)據(jù)展示，表格列數(shù)與數(shù)據(jù)量的增加也讓我們對(duì)表格的布局方式提出了更高的要求。這時(shí)候，我們就需要用到CSS表格的特性，讓一行里展示多列的數(shù)據(jù)。

table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
.colspan2 {
grid-column-end: span 2;
}
.colspan3 {
grid-column-end: span 3;
}
.colspan4 {
grid-column-end: span 4;
}
tr:nth-child(2n) {
background-color: #f2f2f2;
}

使用CSS表格一行里展示多列需要用到的CSS屬性是grid-column-end。通過設(shè)置 span值，該元素將從當(dāng)前行起始位置跨越指定數(shù)量的單元格或列。

比如，如果我們需要一行里展示兩列的數(shù)據(jù)，我們可以設(shè)置一個(gè)類名為colspan2的CSS類：

.colspan2 {
grid-column-end: span 2;
}

然后在HTML表格中，我們可以給需要跨列的單元格加上這個(gè)CSS類名：

<td class="colspan2">跨越兩列的單元格</td>

同理，如果需要展示三列，我們可以設(shè)置一個(gè)類名為colspan3的CSS類：

.colspan3 {
grid-column-end: span 3;
}

然后在HTML表格中給需要跨列的單元格增加這個(gè)CSS類名：

<td class="colspan3">跨越三列的單元格</td>

還有一些其他的情況，比如我們需要跨越四列的單元格，只需要新增一個(gè)colspan4的CSS類名即可：

.colspan4 {
grid-column-end: span 4;
}

這樣子，通過CSS表格一行里展示多列的方式，我們可以更加自由地配置表格的布局，提高表格的數(shù)據(jù)展示效果和頁面的美觀程度。