CSS表格中間有邊框是一種常見的設(shè)計方式,可使表格更加清晰明了,提高用戶體驗。下面介紹一些實現(xiàn)方法。
table { border-collapse: collapse; /*合并邊框*/ } td { border: 1px solid black; /*單元格邊框*/ } td:not(:last-child) { border-right: none; /*除最后一個單元格外,去掉右側(cè)邊框*/ } td:not(:first-child) { border-left: none; /*除第一個單元格外,去掉左側(cè)邊框*/ } tr:not(:first-child) td { border-top: none; /*除第一行外,去掉上側(cè)邊框*/ }
代碼中,border-collapse屬性可將相鄰單元格的邊框合并為一個,避免了重復的繪制。每個單元格的邊框設(shè)置為1像素的黑色實線,且除了第一個和最后一個單元格外,其余的除去左右邊框。而每行的第一個單元格除去頂部邊框。
以上代碼實現(xiàn)了表格中間有邊框的效果,但如果需要添加間隔線,可使用:after偽元素實現(xiàn),代碼如下:
td { position: relative; /*設(shè)置position屬性方便定位*/ } td:after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: black; /*間隔線顏色*/ }
以上代碼會添加一條1像素寬的垂直間隔線,且該間隔線在每個單元格的最右側(cè)。如果需要水平間隔線,可使用:before偽元素實現(xiàn),代碼類似。
總之,針對不同的需求,可使用不同的CSS屬性和偽元素實現(xiàn)表格中間邊框、間隔線等效果。這樣不僅美觀,且能夠增強網(wǎng)站的用戶體驗。