CSS表格是開發(fā)網(wǎng)頁時不可或缺的元素,而給表格添加邊框可以讓表格更加美觀,同時也可以更好地區(qū)分表格中的內(nèi)容。本文將介紹如何使用CSS表格將表格的上下邊框設(shè)為實線。
table { border-collapse: collapse; width: 100%; } td,th { border: 1px solid black; padding: 8px; } thead th { border-bottom: 2px solid black; } tbody td { border-top: 2px solid black; }
上述CSS代碼中,我們使用了border-collapse屬性將表格邊框合并,同時,我們給單元格(td)和表頭單元格(th)添加了1px黑色實線邊框,并給其添加了8像素內(nèi)邊距。
為了將表格的上下邊框設(shè)為實線,我們還需要添加thead和tbody的樣式。我們使用了thead th選擇器選擇表頭單元格,給其添加2px的黑色實線下邊框。同樣的,我們使用了tbody td選擇器選擇表格主體單元格,給其添加了2px的黑色實線上邊框。
通過以上CSS代碼,我們成功地將表格的上下邊框設(shè)置為了實線,使得表格看起來更加美觀,同時也使表格中的內(nèi)容更加分明,易于閱讀。