閉じる

Tableのセルの余白や隙間をなくす、枠線を細くする初期化リセットCSS

WebサイトのTable、表でセルの間、枠線の間に余白が空いてしまったり枠線が太く表示される場合があります。

リセットCSSを導入していない場合やTableが初期設定されていない可能性がありますので設定してみましょう。

Table、セルの隙間や余白をなくすCSSの設定

tableのセルの隙間、枠線の間に余白が空いてしまう場合はtableにstyle設定してみましょう。

border-collapse: collapse;
border-spacing: 0;

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

上記の設定で余白がある場合は他で余白が設定されている可能性もあります。

その場合はtdのpaddingやmarginもリセットしてみましょう。

table, tr, th, td {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
}

Table、枠線の初期化設定

tableの枠線、罫線が太く表示されてしまう場合などはtableでボーダーを初期化設定してみましょう。

まずtableタグの枠線を非表示にします。

非表示の設定はborderに「none」を設定します。

border: none;

 

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

先のセルと合わせて記載すると、こんな感じです。

そして、thやtdにボーダーの太さやカラーを設定します。

th,td {
border:solid 1px #333;
}

table、th 、tdのCSS設定は上手くいかない場合があります。

まずはCSSをリセットして1つづつ設定することをおすすめします。

  

関連記事

  1. TCD

    WordPressでポータルサイトを簡単に作成できるテーマ(テン…

  2. LinkChecker

    ホームページ、htmlのリンク切れをチェックできるサービスとツー…

  3. SSH接続で使える初心者のためのUnix/Linuxコマンド

  4. WEBサイトの制作やネットショップ作成で利用できる2021年の補…

  5. GOOGLE日本語フォント

    GoogleFonts日本語 テスト公開中

  6. chrome hosts

    Chromeでhosts設定を行える拡張機能

ピックアップ記事

  1. 日本語設定
  2. キャプチャソフト
ページ上部へ戻る