CSS テーブルで重複するセル境界線の border-collapse プロパティ

構文: border-collapse: 分割 | 分割

値:
分割: デフォルト値。境界線非依存 (標準 HTML)
折りたたみ: 隣接するエッジがマージされます

説明:
行とセルのエッジが一緒にマージされるか、標準の HTML スタイル に従って分離されるかを テーブル で設定または取得します。
このプロパティは、currentStyle オブジェクトに対して読み取り専用です。他のオブジェクトについては、読み取りと書き込みが可能です。
対応するスクリプト機能は borderCollapse です。

例:

table { border-collapse: separate; }

適用対象:
IE5.0+ currentStyle runtimeStyle style TABLE

例 1: 役に立たないスタイル

以下は引用の断片:

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>

例 2: エフェクト スタイル

以下は引用部分です:

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" style="border-collapse:collapse;">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>

table width=1 はすでに設定されています幅を1に
問題はこれで、TD側の各ラインが1px、テーブル側のラインも1pxです。次に、2 つの td が隣接する場合、各 td 側線は 1 であるため、それらが移動するときの側線の「幅の合計」は 1+1=2 となります。 tdとtableが隣接している場合も同様です。

collapse : 隣接するエッジが結合されます

隣接するエッジが結合されます!前に述べたのは、td と td の間、および td と table の間の隣接エッジの問題のため、1+1=2 です。デフォルトでは、隣接するエッジはマージされないため、1+1=2 となります。ここでは、border-collapse:collapse を使用してそれらをマージするので、幅は 1px のままです。つまり、細い枠線が表示されます。

cellspacing は "0" に設定されており、表示される結果は、最初のテーブルの各セル間の距離が 0 であることです。表の境界線が「0」に設定されている場合、セル間の距離は 0 になります
cellpadding 属性は、セルの内容とセルの境界線の間の空白の距離のサイズを指定するために使用されます
。この属性のパラメータ値も数値であり、セルの内容と上下の境界線の間の空白距離の高さが占めるピクセル数と、セルの内容と上下の境界線の間の空白距離の幅が占めるピクセル数を表します。セルの内容と左右の境界線。

以上がCSS テーブルで重複するセル境界線の border-collapse プロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。