関連プロパティ

• border-collapse
• border-style

結合によって起こる競合の解決方法

表のボーダーを結合してしまうと、様々なところで指定がぶつかり合ってしまいます。その解決方法は、各辺が最も「目を引く」ボーダーを選択する事に主眼を置いたものです。つまり、一番目立つボーダーを優先して採用します。

以下のように処理します。

1. いかなる競合に於いても、'border-style'の値'hidden'は最優先します。この値が適用された箇所にはボーダーを表示しません。
2. 'none'という値は最も優先度が低いです。その辺に関わるすべての要素についてボーダーのプロパティが'none'という値を採る場合に限って、ボーダーを表示しません。('none'は'border-style'の初期値です)
3. 上記2項に該当しない場合、より幅が太いボーダーを優先します。複数の候補が同じ幅である場合、ボーダーの種類に関する優先順序は以下の通りです。
   'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset'
4. ボーダーの種類も幅も同じで色だけが異なる場合、セル要素に対する指定が最優先され、以下優先度が高い順に、行要素、行グループ要素、列要素、列グループ要素、表要素となっています。
5. それも同じ場合はおそらく、より右、より下にあるセル、行、列、行グループ、列グループの指定が適用されます。

以下の例ではこの優先規則を実際に適用してみました。以下のCSSを
table          { border-collapse: collapse;
                 border: 5px solid yellow; }
*#col1         { border: 3px solid black; }
td             { border: 1px solid red; padding: 1em; }
td.solid-blue  { border: 5px dashed blue; }
td.solid-green { border: 5px solid green; }
次のHTMLに適用すると、
<table>
<col id="col1"><col id="col2"><col id="col3">
<tr id="row1">
    <td> 1 </td>
    <td> 2 </td>
    <td> 3 </td>
</tr>
<tr id="row2">
    <td> 4 </td>
    <td class="solid-blue">" 5 </td>
    <td class="solid-green">" 6 </td>
</tr>
<tr id="row3">
    <td> 7 </td>
    <td> 8 </td>
    <td> 9 </td>
</tr>
<tr id="row4">
    <td> 10 </td>
    <td> 11 </td>
    <td> 12 </td>
</tr>
<tr id="row5">
    <td> 13 </td>
    <td> 14 </td>
    <td> 15 </td>
</tr>
</table>
このようになります。

出来ればほかの解決方法も用意し、競合の解決方法を選択出来るプロパティが欲しいところです。