閉じる

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. BlockchainをWebにどう活用するかw3cイベントで議論…

  2. 【CSS】ボタンのタップ、クリック時のオレンジやブルーの枠線を消…

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

  4. css grid

    IE11に対応させる場合はCSS Grid Layoutを利用し…

  5. iphone

    【CSS】Androidのみ余白や文章の行間がせまくなる時はli…

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

ピックアップ記事

  1. reCAPTCHA
  2. 日本語設定
ページ上部へ戻る