web-dev-qa-db-ja.com

テーブルの境界線間隔を削除する方法

私はテーブルを持っています、最初の行は

<tr>
<th>1</th>
<th>2</th>
</tr>

「th」に黒の背景を配置します。 1と2のセルには何らかの境界線があります/それらを分離しています...ソースコードを見て、何かを見つけたと思います。

border-collapse: separate;
border-spacing: 2px;

このCSSコードはソースコードに「ユーザーエージェントstylesheettable」としてリストされており、これが問題かどうかをテストするために有効化/無効化できませんでしたが、同じコードを「none」および「0」パラメータで試し、追加しましたが、どちらも助けにはなりませんでした...

誰かが助けてくれて、国境をどこからお願いしますか？

csshtml-tableborderspacing
27
Alexandru Vlas

あなたのテーブルはデフォルトで以下のようになり、テーブルIDまたはクラスにCSSルールを設定します

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <th>1</th>
  <th>2</th>
</tr>
</table>

css：

border-collapse: collapse;
40
w3uiguru

テーブルにCSSルールを設定します。

table {
    border-collapse: collapse;
}

このjsFiddleの例にアクセスし、境界崩壊プロパティを折りたたみから分離に切り替えて、テーブルのレイアウトがどのように変化するかを確認できます。 。 border-collapse property は、折りたたみ、分離、または継承のみ可能です。

11
j08691

border-collapse: none 無効です。 border-collapse: collapse。

6
cp3

ボーダー折りたたみを使用できます。 border-collapseプロパティは、テーブルの境界線を単一の境界線に折りたたむか、標準のHTMLのように分離するかを設定します。

http://www.blooberry.com/indexdot/css/properties/table/bcollapse.htm から：

CSS2折りたたみ境界モデルでは、隣接セルに指定された境界が異なり、競合している場合の解決策が用意されています。

  1. すべての共有メンバーに、「border」が「hidden」に設定されているコンポーネントがある場合、共通ボーダーは無条件に「hidden」に設定する必要があります。

  2. 共有枠に「border」が「なし」に設定されているコンポーネントがある場合、レンダリング可能な「border」プロパティ値を保持する他の境界共有メンバーによってオーバーライドできます。

  3. すべてのボーダー共有メンバーがボーダーコンポーネントに「なし」の値を指定した場合、ボーダーのみが「none」に設定されます。

  4. 共有枠に「border-width '競合（「border」値が「hidden」のコンポーネントがない場合、もちろん最大のボーダー幅をレンダリングする必要があります。

  5. 共有枠に「ボーダースタイル」の競合がある場合、推奨される優先順位を使用する必要があります（左から右へ）：「double」、「solid」、「dashed "、" dotted "、" ridge "、" outset "、" groove "、" inset。 "

  6. 共有枠に「境界線色」の競合がある場合、推奨される優先順位を使用する必要があります（左から右へ）：テーブルセル、テーブル行、行グループ、列、列グループ、テーブル。

    table
  {
   border-collapse:collapse;
  }

注

  1. 「折りたたみ境界線」レンダリングモデルでは、「インセット」の「ボーダースタイル」値は「溝」のように動作し、「アウトセット」は「リッジ」のように動作します。
  2. CSS2は、このプロパティの初期値が「折りたたみ」であることを指定しました。 MozillaとOperaは初期値が「separate」になるように動作するため、CSS2.1は「separate」を公式の初期値にします。
3
NullPoiиteя

これを試して

table {
    border: none;
    border-spacing: 0;
}
1
Fury