CSS表格在網頁布局中相當重要，可以通過樣式的設置來使表格更加美觀、易讀。其中，加入橫線是一種經常使用的樣式。本文將介紹如何在表格行上加上一道橫線。
/* HTML代碼 */
<table>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
<tr>
<td>數據11</td>
<td>數據12</td>
<td>數據13</td>
</tr>
<tr>
<td>數據21</td>
<td>數據22</td>
<td>數據23</td>
</tr>
</table>
/* CSS樣式 */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
tr {
position: relative;
}
tr::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #000;
}首先，我們需要先寫好HTML代碼，包括一個
| 或 | 標簽，用于顯示表格數據。接著，在CSS樣式中對表格進行了一系列設置，如設置了表格的邊框、內邊距、文字居中等。 而實現在表格行上加入橫線的關鍵部分則在于tr和tr::before這兩個選擇器的設置。我們通過設置tr的position屬性為relative，將它設為相對定位，在之后的樣式設置中，利用絕對定位的tr::before在相對定位的tr內部形成一道橫線。tr::before選擇器中的content屬性用于設定生成的偽元素，這里將其設為一個空字符串，以便使生成的元素為空，只起到一個輔助作用。接著，對于其它的屬性，我們可以逐一詳細設置，如設置left為0、bottom為0等。 通過以上的CSS樣式設置，我們便可以實現在表格行上加上一道橫線的效果了。 上一篇css表格的標題設置字體 下一篇css插折線圖 |
|---|