ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML と CSS で表の境界線の間隔を削除するにはどうすればよいですか?

HTML と CSS で表の境界線の間隔を削除するにはどうすればよいですか?

DDD
リリース: 2024-11-15 03:56:02
オリジナル
380 人が閲覧しました

How to Eliminate Table Border Spacing in HTML and CSS?

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

提供されたコードでは、テーブル内の行と列の間に過度のスペースがあり、目的のシームレスな外観が妨げられています。この問題を解決するには、次のスタイルを実装します。

table {
  border-collapse: collapse;
  border-spacing: 0;
}
ログイン後にコピー

border-collapse: Collapse プロパティは、隣接するテーブルの境界線をマージし、要素間の目に見える分離を削除します。さらに、border-spacing を 0 に設定すると、セル間隔の削除が明示的に指定されます。

ブラウザ間の互換性

ブラウザ間の互換性、特に Internet Explorer 6 と7、cellspacing 属性をテーブル上で直接利用することが不可欠ですelement.

<table cellspacing="0">
ログイン後にコピー

ブラウザ サポートに関する更新された推奨事項

かつて Internet Explorer バージョン 6 および 7 ではセル間隔を直接設定する必要がありましたが、Internet Explorer のより新しいバージョンでは、他の一般的なブラウザは CSS border-spacing プロパティをサポートしています。ブラウザ間の互換性を確保するには、両方の方法を利用することをお勧めします:

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table.no-spacing {
  cellspacing: 0; /* Supports IE6 and IE7 */
}
ログイン後にコピー

以上がHTML と CSS で表の境界線の間隔を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート