CSS表格可以用來展示數據和內容,而且可以很容易地定制樣式。但是,默認情況下表格的邊框樣式是只有表格外邊框、表頭和表格主體的邊框,而沒有單元格的邊框。在這篇文章里,我們將學習如何使用CSS來顯示所有框。
table { border-collapse: collapse; } td, th { border: 1px solid black; }
以上代碼將給表格的所有單元格添加一個1像素寬的黑色實線邊框。
但是,如果表格中有單元格合并的情況,上述代碼可能會導致顯示不正常。在這種情況下,我們需要為單元格添加額外的CSS樣式來避免這種情況。
td { border: solid; border-width: 1px 0 1px 0; } td:first-child { border-left-width: 1px; } td:last-child { border-right-width: 1px; } tr:first-child td { border-top-width: 1px; } tr:last-child td { border-bottom-width: 1px; }
以上代碼使用了border-width屬性來定義每個單元格的實線邊框寬度。為了避免合并單元格的邊框重疊,我們為每個邊框指定了不同的寬度。
此外,我們還使用了:first-child和:last-child偽類選擇器來分別為第一列和最后一列單元格的左右邊框指定寬度。同時,使用tr:first-child和tr:last-child偽類選擇器來為第一行和最后一行單元格的上下邊框指定寬度。
通過以上CSS樣式,我們可以讓表格中的所有單元格都顯示實線邊框。
上一篇css表格斜線怎么做