0

セル間隔でテーブルの内側にのみ境界線を追加する方法を理解しようとしています。私がする時：

table {
  border-collapse: collapse;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
}

間隔のないセルだけでほぼ正常に機能します。それを達成する方法は？

ありがとう

4

2 に答える 2

1

属性を定義したテーブルのCSSルールを作成しようとしている場合cellspacing、解決策は次のようになります。

table[cellspacing] {
  border-collapse: collapse;
  border-spacing: 4px;
}
table[cellspacing] td, table[cellspacing] th {
  border: 1px solid black;
}

ただし、テーブルにクラスを指定する方がはるかにクリーンで効率的です（<table class="withspace">）。だからあなたはもっと古典的にするだろう

table.withspace {
  border-collapse: collapse;
  border-spacing: 4px;
}
table.withspace td, table.withspace th {
  border: 1px solid black;
}

編集：念のため、セルにスペースを入れるだけの場合は、cssにパディング値を追加してください：

table {
  border-collapse: collapse;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
  padding: 4px;
}
于 2012-11-22T18:08:40.370 に答える
1

投稿されたCSSコードは正しく、準拠しているブラウザーでは、セルの周囲（ただしテーブル全体の周囲）とセル間の4pxの間隔が発生します。プロパティをサポートしていないIE7以前でこれをテストしていたと思いborder-spacingます。

境界線のないテーブルを作成し、各セルの内側に内側の要素を配置して、そのセルが小さなマージンを除いてセル全体を占有し、内側の要素の周りに境界線を描画するよりも簡単な回避策はありません。これはおそらく醜いものになるので、IE7でのプレゼンテーションは最適ではありません。

（何らかの理由で、border-spacingjsfiddleでは機能しないようです。おそらくいくつかの一般的なルールがプロパティを設定する通常の試みをオーバーライドします。）

于 2012-11-22T20:35:40.313 に答える