ネストしたテーブルのCSSレイアウト

CSS on 5 Feb , 2015

最近ではテーブルのレイアウトはCSSで調整するのが一般的です。
例えば横幅300pxで見出しを50pxにし区切りと囲い線を入れたい場合は↓こんな感じになります。

■htmlソース

<table class="sample1">
 <tr>
  <th></th>
 </tr>
 <tr>
  <td></td>
 </tr>
</table>

■CSSソース

table.sample1{
 width:300px;
 border:1px solid #000000;
}

.sample1 th {
 width:50px;
 border:1px solid #000000;
}

.sample1 td {
 width:250px;
 border:1px solid #000000;
}

ここまでは一般的ですよね。
ではこのtdの中にさらにテーブルを作ったとします。

■htmlソース

<table class="sample1">
 <tr>
  <th></th>
 </tr>
 <tr>
  <td>
   <table>
    <tr>
     <th></th>
    </tr>
    <tr>
     <td></td>
    </tr>
   </table>
  </td>
 </tr>
</table>

すると、子のテーブルにも「.sample1」のクラスが継承されてしまいます。
これを回避するためには別のクラスを作り、子のテーブルに適用させます。

■htmlソース

<table class="sample1">
 <tr>
  <th></th>
 </tr>
 <tr>
  <td>
   <table class="sample2">
    <tr>
     <th></th>
    </tr>
    <tr>
     <td></td>
    </tr>
   </table>
  </td>
 </tr>
</table>

※ここで注意!
現在の子のテーブルには「.sample1」が継承されているのでそれを打ち消す記述が必要となります。
たとえば子のテーブルには線はいらず横幅も親のtdの横幅と同じにしたい場合は↓のように。

■CSSソース

table.sample2{
 width:auto;
 border:none;
}

.sample2 th {
 width:auto;
 border:none;
}

.sample2 td {
 width:auto;
 border:none;
}

※ここがポイント!
「.sample2」には線はいらないし、横幅も親の と同じなら「width:auto;」「border:none;」なんて記述しなくても良いように思えますが、
この記述がないと「.sample1」のクラスが継承されたままでサイズの指定されてないクラスを追加しただけでは、継承された部分が残ってしまいます。

分かりづらいですよね。
テーブルの中にテーブルを作る事自体がレイアウト的には良くないんだと思います。
親と子のどちらかはdivにした方が無難ですね。
phpでループなど絡んでくること、親をdivレイアウトを作ってしまうとflotの解除とか面倒そうなので、子をdivにしてあげるのが良いかと思います。
やり方が沢山あるので悩みます・・・