CSS表格只顯示一行下邊框是一個常用的技巧,可以使表格看起來更加簡潔美觀。下面將介紹如何實現這種效果。
首先,在HTML文件中創建一個表格,如下所示:
然后,在CSS文件中為表格添加樣式,如下所示:
解釋如下:
- border-collapse: collapse; 合并表格邊框,讓單元格之間的邊框能夠重疊在一起,形成連續的線條。
- padding: 10px; 設置單元格的內邊距,讓內容離邊框有一定的間距。
- border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; 設置單元格的上、右、左邊框為1像素實線,顏色為灰色。
- border-bottom: none; 設置單元格的下邊框為none,即不顯示下邊框。
- tr:last-child td { border-bottom: 1px solid #ccc; } 選擇最后一行的單元格,設置它們的下邊框為1像素實線,顏色為灰色。
這樣就完成了CSS表格只顯示一行下邊框的效果。
總結:CSS表格只顯示一行下邊框是利用CSS樣式來控制單元格邊框樣式實現的。通過設置上、右、左邊框為實線,下邊框為none,再針對最后一行的單元格設置下邊框為實線,就可以達到只顯示一行下邊框的效果。
首先,在HTML文件中創建一個表格,如下所示:
<table> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> <tr> <td>小紅</td> <td>20</td> <td>女</td> </tr> </table>
然后,在CSS文件中為表格添加樣式,如下所示:
table { border-collapse: collapse; /* 合并表格邊框 */ } th, td { padding: 10px; /* 單元格內邊距 */ border-top: 1px solid #ccc; /* 上邊框 */ border-right: 1px solid #ccc; /* 右邊框 */ border-left: 1px solid #ccc; /* 左邊框 */ border-bottom: none; /* 下邊框為none */ } tr:last-child td { /* 最后一行單元格的下邊框 */ border-bottom: 1px solid #ccc; }
解釋如下:
- border-collapse: collapse; 合并表格邊框,讓單元格之間的邊框能夠重疊在一起,形成連續的線條。
- padding: 10px; 設置單元格的內邊距,讓內容離邊框有一定的間距。
- border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; 設置單元格的上、右、左邊框為1像素實線,顏色為灰色。
- border-bottom: none; 設置單元格的下邊框為none,即不顯示下邊框。
- tr:last-child td { border-bottom: 1px solid #ccc; } 選擇最后一行的單元格,設置它們的下邊框為1像素實線,顏色為灰色。
這樣就完成了CSS表格只顯示一行下邊框的效果。
總結:CSS表格只顯示一行下邊框是利用CSS樣式來控制單元格邊框樣式實現的。通過設置上、右、左邊框為實線,下邊框為none,再針對最后一行的單元格設置下邊框為實線,就可以達到只顯示一行下邊框的效果。