テーブルのtdの幅と高さのサイズを固定して、テーブルの残りのtdを必要に応じて拡張する方法を知っていますか?
問題は、tdの内部にデータがある場合、データよりも縮小されないことですが、空の場合は完全に縮小され、ウィンドウを展開するとtdが展開されます。
ウィンドウを拡大する場合でも縮小する場合でも、td内にデータがあるかどうかに関係なく、tdのサイズを保持したいと思います。
また、ウィンドウを拡張しても、残りのtdを拡張できるようにする必要があります。
クラスtableContainerRow2は、固定サイズにするために必要なものです。例えば.
<style>
.divContainer {
margin:10px;
background-color:#C7D8EE;
border:2px solid #0076BF;
text-align:left;
}
.tableContainer {
color:#0076BF;
margin: -10px 0px -10px 0px;
border-spacing: 10px;
empty-cells:show;
width:90%;
}
.tableContainerRow2 {
background-color:white;
border:2px solid #0076BF;
}
</style>
<div class="divContainer">
<table class="tableContainer" cellspacing="10px">
<tr>
<td width="18%" style="white-space:nowrap;" >NHS Number</td>
<td width="17%"> </td>
<td width="10%" style="white-space:nowrap;">Date of Visit</td>
<td width="10%"> </td>
<td colspan="3" style="white-space:nowrap;">Care Time Started</td>
<td width="4%"> </td>
<td width="5%"> </td>
<td width="25%" rowspan="2" style="font-weight:bold;vertical-align:middle;white-space:nowrap;">Tick when<br/> care starts</td>
</tr>
<tr >
<td width="18%" class="tableContainerRow2"> 0123456789</td>
<td width="17%"> </td>
<td width="10%" class="tableContainerRow2"> 12/12/09</td>
<td width="10%"> </td>
<td width="5%" class="tableContainerRow2"> 12</td>
<td width="1%" > :</td>
<td width="5%" class="tableContainerRow2"> 10</td>
<td width="4%"> </td>
<td width="5%"> ☑</td>
<td width="10%" > </td>
</tr>
</table>
</div>
固定したいtd/columnの幅を設定するだけで、残りは拡張されます。
<td width="200"></td>
これにより、空のtdが処理されます。
<td style="min-width: 20px;"></td>