邊線衝突解決法（border conflict resolution）是指，當 TABLE 元素設為 collapse 時；TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TR, TD, TH 等元素，都可以各自設定邊線。當多層的父子元素設置不同邊線時，會依下列原則決定小格子（cell）的邊線。
- border-style 設為 hidden，有最高優先權。會蓋過父子元素的邊線。
- border-style 設為 none，其優先權最低。會在父子元素間被其它設定蓋掉。父子元素全都是 none 時才會有效。
- 寬的邊線設定，其優先權高於細的邊線。邊線寬度相同時，border-style 的優先順序是：double, solid, dashed, dotted, ridge, outset, groove, inset。
- 當 border-style 只有顏色不同時，越靠近格子的設定，優先權越高；越外層優先權越低。橫列的優先權高於直行。
試用 CAPTION, THEAD, TBODY, TFOOT 的邊線。
- 風格用法：
<style type='text/css'>
.tbl {border-collapse:collapse;
border:solid 4px white
}
.tbl CAPTION {border:solid 4px red}
.tbl THEAD {border:solid 4px green}
.tbl TBODY {border:solid 4px blue}
.tbl TFOOT {border:solid 4px yellow}
</style>
<table class=tbl>
<caption>好玩遊戲</caption>
<thead>
<tr><th>名稱<th>價格
</thead>
<tbody>
<tr><td>射擊遊戲<td>120
</tbody>
<tfoot>
<tr><td>線上遊戲<td>
</tfoot>
</table> - 執行結果：
好玩遊戲 名稱 價格 射擊遊戲 120 線上遊戲
- 在 IE6 中，THEAD, TBODY, TFOOT 不能設邊線。Firefox, Safari, Chrome 都可以設。
試用 COL, TR 的邊線。
- 風格用法：
<style type='text/css'>
.tbl2 {border-collapse:collapse;
border:solid 4px white
}
.tbl2 COL {border:solid 4px red}
</style>
<table class=tbl2>
<col>
<tr><th>名稱<th>價格
<tr style='border:solid 4px green'><td>益智遊戲<td>130
</table> - 執行結果：
名稱 價格 益智遊戲 130
- 在 IE6 中，COL, TR 不能設邊線。Firefox, Safari, Chrome 都可以設。上例中，橫列的優先權高於直行。
hidden 與 none。
- 風格用法：
<style type='text/css'>
.tbl3 {border-collapse:collapse;
border:solid 4px white
}
.tbl3 COL {border:solid 4px red}
.tbl3 TD {border:solid 4px blue}
</style>
<table class=tbl3>
<col>
<tr><th>名稱<th>價格
<tr><td>賽車遊戲<td>200
</table>
<p>
<table class=tbl3>
<col style='border:hidden 4px red'>
<tr><th>名稱<th>價格
<tr><td>賽車遊戲<td>200
</table>
<p>
<table class=tbl3>
<col style='border:none 4px red'>
<tr><th>名稱<th>價格
<tr><td>賽車遊戲<td>200
</table> - 執行結果：
名稱 價格 賽車遊戲 200 名稱 價格 賽車遊戲 200 名稱 價格 賽車遊戲 200
- 上面第一例顯示，越靠近小格子，優先權越高；越外層優先權越低。第二例的 COL 設了 border:hidden，可看出 COL 的父元素 TABLE，與其子元素 TD 的邊線都被藏起來了。第三例設了 border:none，父元素與子元素都會蓋過它。此例不能在 IE6 展現；Firefox, Safari, Chrome 都成功。
邊線寬度與型態。
- 風格用法：
<style type='text/css'>
.tbl4 {border-collapse:collapse;
border:solid 4px white
}
.tbl4 COL {border:solid 4px red}
.tbl4 TD {border:solid 4px blue}
</style>
<table class=tbl4>
<col>
<tr><th>名稱<th>價格
<tr><td>賽車遊戲<td>200
</table>
<p>
<table class=tbl4>
<col style='border:solid 2px red'>
<tr><th>名稱<th>價格
<tr><td>賽車遊戲<td>200
</table>
<p>
<table class=tbl4>
<col>
<tr><th>名稱<th>價格
<tr><td style='border:dotted 4px blue'>賽車遊戲<td>200
</table> - 執行結果：
名稱 價格 賽車遊戲 200 名稱 價格 賽車遊戲 200 名稱 價格 賽車遊戲 200
- 上面第二例顯示，寬的邊線會蓋過細的邊線。第三例的 dotted 優先權低於 solid。此例不能在 IE6 展現；Firefox, Safari, Crome 都成功。
