CSS 顯示列線 CSS 中有很多方法可以顯示表格或列表中的水平線和垂直線，但是很少有人知道如何顯示列線。這篇文章將介紹如何使用 CSS 來顯示列線。 首先，我們需要一個 HTML 表格。下面是一個示例表格：

<table>
<thead>
<tr>
<th>名稱</th>
<th>價格</th>
<th>數量</th>
<th>總價</th>
</tr>
</thead>
<tbody>
<tr>
<td>蘋果</td>
<td>$0.99</td>
<td>2</td>
<td>$1.98</td>
</tr>
<tr>
<td>香蕉</td>
<td>$0.50</td>
<td>3</td>
<td>$1.50</td>
</tr>
<tr>
<td>梨子</td>
<td>$1.25</td>
<td>1</td>
<td>$1.25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">總價</td>
<td>$4.73</td>
</tr>
</tfoot>
</table>

這個表格有四個列：名稱、價格、數量和總價。為了顯示列線，我們可以向表單元素應用 CSS 樣式。 最簡單的方法是為每個單元格應用邊框樣式。例如：

table td {
border-right: 1px solid black;
}

這將向每個單元格的右側添加一條邊框線。但是，這將在最后一列中創建額外的線條，這是我們不想要的。為了解決這個問題，我們可以使用偽類選擇器 `:not()` 來選擇除最后一列以外的所有列。例如：

table td:not(:last-child) {
border-right: 1px solid black;
}

這將向除了最后一列之外的所有列添加邊框線。 但是，這種方法將在表格的第一行和最后一行中創建不必要的水平線。要避免這種情況，我們可以添加以下 CSS 樣式：

table td:not(:last-child),
table th:not(:last-child) {
border-right: 1px solid black;
}

這將向除了最后一列之外的所有列的單元格和標題元素添加邊框線。 這就是如何使用 CSS 顯示列線的簡單方法。現在您可以使用這個方法來改善您的表格和列表的外觀。