CSS中經常會用到表格,但是默認的表格線條會影響美觀和設計感。可以使用CSS去掉表格中間的線條,讓表格更加簡潔美觀。
table { border-collapse: collapse; /*合并表格邊框*/ border-spacing: 0; /*去除表格中的空隙*/ } td, th { border: none; /*去除單元格邊框*/ border-bottom: 1px solid #ddd; /*添加底部邊框*/ } tr:first-child th { border-top: none; /*去除第一行頂部邊框*/ }
以上代碼中,border-collapse: collapse;
屬性用于合并表格邊框,使其更美觀,border-spacing: 0;
屬性則是去除表格中的空隙。
而td, th
指定了去除單元格邊框,并添加底部邊框,這樣可以保留只保留表格頭和表格尾的邊框。
最后,tr:first-child th
是去除第一行頂部邊框。這樣我們就可以用簡潔的CSS去掉表格中間的線條,讓表格更加美觀。