CSS表格同行是指表格中的某些單元格在同一行顯示。通過(guò)CSS可以實(shí)現(xiàn)各種不同形式的表格同行效果。

table {
border-collapse: collapse;  /*合并邊框*/
}
td {
border: 1px solid black;  /*設(shè)置單元格邊框*/
padding: 10px;  /*設(shè)置單元格內(nèi)邊距*/
}
td.same-row {
display: inline-block;  /*設(shè)置單元格內(nèi)元素為行內(nèi)塊元素*/
margin-right: -4px;  /*去除單元格之間產(chǎn)生的空白間隙*/
}

使用以上CSS代碼可以實(shí)現(xiàn)表格同行效果。在表格HTML代碼中，需要為需要同行的單元格添加同一個(gè)類(lèi)名，例如“same-row”。

1
2
3
4
5

以上代碼會(huì)讓單元格2和3在同一行內(nèi)顯示，而不是單獨(dú)占據(jù)一行。

除了以上方法，還可以使用CSS的表格布局方式，通過(guò)設(shè)置單元格的寬度和高度來(lái)實(shí)現(xiàn)表格同行效果。

table {
display: table;
table-layout: fixed;  /*固定表格布局*/
width: 100%;
}
td {
display: table-cell;
border: 1px solid black;
padding: 10px;
height: 100%;  /*設(shè)置單元格高度*/
}
td.same-row {
width: 20%;  /*設(shè)置單元格寬度*/
}

使用以上CSS代碼可以實(shí)現(xiàn)表格同行效果。在表格HTML代碼中，同樣需要為需要同行的單元格添加同一個(gè)類(lèi)名。

1
2
3
4
5

以上代碼會(huì)讓單元格2和3在同一行內(nèi)顯示，而不是單獨(dú)占據(jù)一行。