閉じる

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. SSH接続で使える初心者のためのUnix/Linuxコマンド

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

  3. レスポンシブデザインでCSSが効かない場合に確認すること

  4. GOOGLE日本語フォント

    GoogleFonts日本語 テスト公開中

  5. IE

    2018年1、2月のブラウザシェアとIE使用率

  6. Instagram(インスタグラム)のアクセストークン、APIが…

ピックアップ記事

  1. キーワード
ページ上部へ戻る