※ ChatGPTを利用し、要約された質問です(原文:tableにtable。table同士の間隔を拡大)
tableにtable。table同士の間隔を拡大
tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}
#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}
.center{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}
#end{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #40ee22;
}
td.test1{
background-color: #000000;
color: #333333;
}
td.test2 img{
margin: 10px;
}
.test3{
font-size: 12px;
padding: 5px;
}
td.test4{
text-align: center;
}
</style>
<table id="test0">
<tbody>
<tr>
<td>
<DIV style="height:400px; overflow:auto;">
<table id="start">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>
<table class="center">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>
<table id="end">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
お礼
ありがとうございました。