閉じる

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. サイト内検索機能で広告yahooカスタムサーチを利用する

  2. GOOGLE日本語フォント

    GoogleFonts日本語 テスト公開中

  3. 病院

    産婦人科、歯医者など病院のホームページ制作に最適なWordPre…

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

  5. TCD

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

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

ピックアップ記事

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