CSS表格是網(wǎng)頁中經(jīng)常使用的元素之一,它可以將數(shù)據(jù)排列整齊,并且可以通過CSS樣式進行美化。今天我們來介紹一種讓CSS表格變成直線的方法。
table { border-collapse: collapse; } td, th { border: 1px solid #000; padding: 8px; } td:first-child, th:first-child { border-left: none; } td:last-child, th:last-child { border-right: none; } tr:last-child td { border-bottom: none; }
首先,我們需要在CSS樣式中設置表格的邊框為合并邊框(border-collapse: collapse;
)。接下來,將表格內的單元格都設置為有1像素黑色實線邊框(border: 1px solid #000;
),并且設置單元格內的內邊距為8像素(padding: 8px;
)。
接下來,我們需要去掉表格每一行的第一個單元格的左邊框和每一行的最后一個單元格的右邊框(td:first-child, th:first-child { border-left: none; }
和td:last-child, th:last-child { border-right: none; }
)。
最后,我們還需要去掉表格最后一行的所有單元格的下邊框(tr:last-child td { border-bottom: none; }
)。這樣,我們就完成了表格變直線的設置。