paddingがtableできかない

Webサイト作成 TIPS
css

CSSでtableを作るとき、paddingを指定しても、うまく反映されない

paddingをたとえばtable のスタイルに設定すると、全部のセルにpaddingが反映されないか、と思ってしまいますが、実際はされません。
されると楽なんですけどねー。

なので、次のような方法で、そのtableのtdにもスタイルが反映されるようにすればよいかと思います。

 ---CSS---
 /* tableには全体的に反映させたいスタイルを記述 */
 .table1 {font-size: 13px;
          border:1px solid #999999;
          border-collapse:collapse;
          width:680px;
          margin:5px auto 5px auto;}
 .table1 td {border:1px solid #999999;
          border-collapse:collapse;
          padding:5px;}
 --html---
 <table class="table1" ><tr><td>サンプル1</td></tr>
 <tr><td>サンプル2</td></tr>
 </table>

table1のスタイルの最後、margin:5px auto 5px auto;は、右と左をautoに指定しておけば、HTMLでalign=centerとかやらなくても中央に配置するためのものです。

カテゴリーcss

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です