スクロール付きのテーブルで、内側に線を付ける方法

質問

添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、
内側のテーブルとテーブルの間に破線をいれたいです。
しかし、CSSで設定しても破線も枠も表示されません。
こういう場合はどうすればいいのでしょうか？

<table id="j">
<tbody>
<tr>
<td>
<DIV style="height:300px; overflow:auto;">
<table class="t">
<tr>
<td rowspan="3">ああああああああああああ</td>
<td colspan="2">いいいいいいいいいいいいいい</td>
</tr>
<tr>
<td colspan="2">ううううううううううううう</td>
</tr>
<tr>
<td>えええええ</td>
<td>おおおおお</td>
</tr>
</table>

<table class="t">
<tr>
<td rowspan="3">ああああああああああああ</td>
<td colspan="2">いいいいいいいいいいいいいい</td>
</tr>
<tr>
<td colspan="2">ううううううううううううう</td>
</tr>
<tr>
<td>えええええ</td>
<td>おおおおお</td>
</tr>
</table>

<table class="t">
<tr>
<td rowspan="3">ああああああああああああ</td>
<td colspan="2">いいいいいいいいいいいいいい</td>
</tr>
<tr>
<td colspan="2">ううううううううううううう</td>
</tr>
<tr>
<td>えええええ</td>
<td>おおおおお</td>
</tr>
</table>

<table class="t">
<tr>
<td rowspan="3">ああああああああああああ</td>
<td colspan="2">いいいいいいいいいいいいいい</td>
</tr>
<tr>
<td colspan="2">ううううううううううううう</td>
</tr>
<tr>
<td>えええええ</td>
<td>おおおおお</td>
</tr>
</table>

<table class="t">
<tr>
<td rowspan="3">ああああああああああああ</td>
<td colspan="2">いいいいいいいいいいいいいい</td>
</tr>
<tr>
<td colspan="2">ううううううううううううう</td>
</tr>
<tr>
<td>えええええ</td>
<td>おおおおお</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

-----css------
#j{
cellpadding: 2;
width: 520;
background-color : #ffe3c8;
border:1px solid #333;
border-spacing:0;
}
}

.t{
width: 500;
height: 100;
border:1px solid #333;
}

td{
cellspacing: 0;
border-collapse: collapse;
border-spacing:0;
}

回答No.1

torayoshi · ベストアンサー

どこにも破線(dashed)の指定が見当たりませんが…
内側のテーブルを破線にすると全部破線になって失敗ですね。
しかも隣接する破線同士が二重になっておかしな表示になってしまう。
対策として内側のテーブル(1～5)の周りのそれぞれのボーダースタイルを変えて二重にならないようにする。

#j{
cellpadding: 2px;
width: 520px;
background-color : #ffe3c8;
border:1px solid #333;
border-spacing:0;
}
.t1{
width: 500px;
height: 100px;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px dashed #333;
}
.t2{
width: 500px;
height: 100px;
border-top:0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px dashed #333;
}
.t3{
width: 500px;
height: 100px;
border-top:0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px dashed #333;
}
.t4{
width: 500px;
height: 100px;
border-top:0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px dashed #333;
}
.t5{
width: 500px;
height: 100px;
border-top:0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #333;
}
td{
cellspacing: 0;
border-collapse: collapse;
border-spacing:0;
}

内側のテーブルをそれぞれt1～t5にクラス分けする。

お礼

解決しました。
有難うございます。