在網頁中設計表格是很常見的,但有時候我們想要去掉表格的邊框來達到更美觀的效果,可是使用CSS表格邊框屬性(border)僅僅只能去掉單邊框,如何去掉雙邊框呢?這里我們可以使用CSS的另一個屬性border-collapse: collapse;
。
table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; }
上方是一個基本的表格代碼,其中border-collapse: collapse;
的作用是將邊框合并成一條線,從而去掉雙邊框的效果。修改border-collapse: separate;
可以將邊框分開,從而恢復雙邊框效果。
table { border-collapse: separate; } td { border: 1px solid black; padding: 5px; }
如果想要只去掉左右兩側的雙邊框,可以在CSS中設置border-left
和border-right
屬性為none,示例代碼如下:
table { border-collapse: collapse; } td { border: 1px solid black; border-left: none; border-right: none; padding: 5px; }
通過上述的方法,我們就能輕松去掉CSS表格中的雙邊框。
上一篇css表格壓著邊框線