閉じる

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. 【CSS】背景のbackground-positionで右からや…

  2. BlockchainをWebにどう活用するかw3cイベントで議論…

  3. サイト内検索機能をGoogleカスタム検索で設置する

  4. GOOGLE日本語フォント

    GoogleFonts日本語 テスト公開中

  5. chrome hosts

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

  6. Facebook Page Plugin(ページ プラグイン)埋…

ピックアップ記事

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