在進行網頁排版時,表格是一個常用的布局方式。但是如果沒有精心的設計,表格可能會顯得過于平凡,導致網頁風格單調。通過添加橫線來區分不同行可以使表格更易讀,下面我們就來介紹如何使用 CSS 實現表格顯示橫線。
table { border-collapse: collapse; /* collapse 表示邊框重疊 */ } tbody tr { border-bottom: 1px solid #ccc; /* 為每一行底部添加 1px 寬度的實線 */ }
以上代碼中,border-collapse: collapse;
表示表格邊框重疊,避免表格過于松散。而tbody tr
就代表表格中每一行的底部,通過border-bottom
實現橫線的添加。
如果我們希望表格頭部和最后一行也擁有橫線,可以添加以下代碼:
thead tr, tfoot tr, tbody tr:last-child { border-bottom: 1px solid #ccc; /* 為表頭、表尾和最后一行底部添加橫線 */ }
在這里,thead tr, tfoot tr
表示表格頭部和表格最后一行,tbody tr:last-child
表示除了表頭、表尾外的最后一行。通過這個選擇器的組合,我們可以實現表格的完整橫線效果。
除了實線,還有虛線、點線等多種線形可供選擇,通過修改border-bottom
的屬性值即可更改。
以上就是實現 CSS 表格顯示橫線的方法,通過簡單的代碼編寫就可以為網頁增添一絲美觀的效果。希望本文對你有所幫助!
上一篇mysql大表處理方式
下一篇css表格文字豎排列