TH不是覆蓋表格邊框（CSS + HTML）

我希望表格的標題具有紅色實心邊框，表格的其餘部分爲黑色虛線邊框。TH不是覆蓋表格邊框（CSS + HTML）

使用下面的代碼，所有都是正確的，但TH的左側和右側黑色虛線。有沒有辦法在TH風格聲明中覆蓋<table>邊界？

這就是我想要達到的目標：

<style type="text/css"> 
table { 
    border-style:none dotted dotted dotted; 
    border-collapse: collapse; 
} 
table th { 
    border: 2px solid red; 
} 
</style> 

<table > 
    <thead> 
    <tr> 
    <th>title 1</th> 
    <th>title 2</th> 
    <th>title 3</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>text</td> 
    <td>text</td> 
    <td>text</td> 
    </tr> 
    <tr> 
    <td>text</td> 
    <td>text</td> 
    <td>text</td> 
    </tr> 
    <tr> 
    <td>text</td> 
    <td>text</td> 
    <td>text</td> 
    </tr> 
    </tbody> 
</table>

來源

2012-07-15 Gotenks

試試這個 - http://jsfiddle.net/eaTLp/

table { 
    border-style:none none dotted; 
    border-collapse: collapse; 
} 

table th { 
    border: 2px solid red; 
} 

table td:first-child { 
    border-left: dotted; 
} 

table td:last-child { 
    border-right: dotted; 
}

你給的虛線邊框僅在表的底部。在左邊和右邊，你選擇<td>的第一個和最後一個:first-child和:last-child，並分別爲它們分配左右邊框。

來源

2012-07-15 10:37:55

它的工作原理，你能解釋你的代碼嗎？ – Gotenks 2012-07-15 10:54:45

更新與解釋 – 2012-07-15 11:03:19

一個簡單的解決方案是設置th邊框寬度等於或大於table邊框寬度，如果這是可以接受的。例如，添加

table { border-width: 2px; }

使它們相等。在您的示例中，寬度是初始值medium，通常在瀏覽器中映射爲3px或4px。

否則，需要採取不同的策略（請參閱Zolthan Toth的回答），該策略在table元素上未設置左側或右側邊框。

原因是根據[邊界衝突解決] [1]規則，較寬的邊界勝（對於等寬邊界，solid擊敗dotted）。

來源

2012-07-15 13:50:40

TH不是覆蓋表格邊框（CSS + HTML）

回答

相關問題