⌘K

プロパティ border-collapse

プロパティ border-collapse は、 HTML テーブル の td セル間または th セル間 （およびセルの境界線とテーブル自体の境界線の間）の二重境界線を 統合して1本のように見せます。

このプロパティは、テーブルおよび display プロパティの値が table または inline-table の要素にのみ適用されます。 残念ながら、通常のブロック要素では機能しません。 適用するのはセルではなく、テーブル自体に対してであることに注意してください。

構文

cssセレクタ {
  border-collapse: collapse | separate;
}

値

値 説明
collapse 二重境界線が1本のように表示されます。 副作用として、プロパティ border-spacing および 属性 cellspacing が機能しなくなります。
separate テーブルの各セルが独自の境界線を持ちます （したがって、セル間の間隔がゼロの場合、一部の場所で境界線が二重になります）。

初期値: separate。

例 . separate 値

現在、テーブル内のすべての境界線は二重です （境界線はセルとテーブル自体の両方に設定されています）： 

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

例 . separate 値

現在、境界線はセルに設定されていますが、 テーブル自体には設定されていません。 2つのセルが境界線を共有する場所では境界線が二重になり、 それ以外の場所では単一になります： 

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

例 . collapse 値

現在、テーブル内のすべての境界線が統合され、 1pxの太さで表示されるようになります。 期待通りの表示です： 

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
csstable {
  border-collapse: collapse;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Backlist-styleプロパティNextborder-spacingプロパティ