不規則的表格與表格標題上的邊界

Question

我有一個類似的表格，我想要做的就是沿着表格邊界放置邊框，並在屏幕上以紅色標記。

表的形式是由黑色標記，我不希望這種黑色邊框可見。 我忘了在這幅圖上表示一些td也沿着這行分成兩半。

我希望有一個更好的方法比爲每個單獨的td設置邊界，我需要。

Answer 1

如果你給你的表類..

<table class='my-table'> 

然後你就可以針對所有的TD在這一類的CSS

.my-table td { 
    border-left:1px solid red; 
    border-right: 1px solid red; 
} 
.my-table { 
    border-bottom: solid 1px red; 
} 

對於TD的那對半沿行分，可能會更容易打開這些邊界（可能通過內聯樣式），而不是打開所有其他td的邊界。也就是說，如果我明白你想要做什麼。希望這可以幫助。

Answer 2

要使用什麼是邊界崩潰的組合和左，右邊框：

<table> 
<thead> 
    <tr> 
    <th>Header One</th> 
    <th>Header Two</th> 
    <th>Header Three</th> 
    <th>Header Four</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>Sanctus sea sed takimata</td> 
    <td rowspan="4">Sanctus sea sed takimata</td> 
    <td rowspan="2">Sanctus sea sed takimata</td> 
    <td>Sanctus sea sed takimata</td> 
    </tr> 
    <tr> 
    <td>Sanctus sea sed takimata</td> 
    <td rowspan="3">Sanctus sea sed takimata</td> 
    </tr> 
    <tr> 
    <td>Sanctus sea sed takimata</td> 
    <td>Sanctus sea sed takimata</td> 
    </tr> 
    <tr> 
    <td>Sanctus sea sed takimata</td> 
    <td rowspan="2">Sanctus sea sed takimata</td> 
    </tr> 
    <tr> 
    <td>Sanctus sea sed takimata</td> 
    <td rowspan="2">Sanctus sea sed takimata</td> 
    <td rowspan="4">Sanctus sea sed takimata</td> 
    </tr> 
    <tr> 
    <td>Sanctus sea sed takimata</td> 
    <td rowspan="3">Sanctus sea sed takimata</td> 
    </tr> 
    <tr> 
    <td>Sanctus sea sed takimata</td> 
    <td rowspan="2">Sanctus sea sed takimata</td> 
    </tr> 
    <tr> 
    <td>Sanctus sea sed takimata</td> 
    </tr> 
</tbody> 
</table> 

用CSS：

table { 
    border-collapse: collapse; 
} 

table thead tr { 
    border: 1px solid black; 
} 

table tbody { 
    border-bottom: 1px solid blue; 
} 

table tbody tr td { 
    border-left: 1px solid blue; 
    border-right: 1px solid blue; 
} 

檢查出來：http://jsfiddle.net/PYWHA/