width指定通り表示されない

質問

下記のようにヘッダー部分とデータ部分を指定した場合、widthで同じ数値を指定しても、ずれて表示されてしまいます。（IE８、ＩＥ9）width指定数値が無視されているように見えるのですが、IEの機能なのであればどのような仕様になっているのか教えてください。
また、widthで指定したとおりに表示させるにはどうしたらよいのか、教えていただきたいと思います。

よろしくお願いします。

ヘッダー部分
<table border="1" CELLSPACING="0" class="tableSearch2" style="cursor:'default';">
<tr class="tdListTitle">
　　<td align="center" width="<%=numwidth%>" rowspan="2">No.</td>
　　<td align="center" width="90" rowspan="2">L３種別</td>
　　<td align="center" width="100" rowspan="2">L４細目</td>
　　<td align="center" width="110" rowspan="2">協力会社</td>
　　<td align="center" width="80" rowspan="2">設計数量</td>
　　<td align="center" width="35" rowspan="2">単位</td>
　　<td align="center" width="80" rowspan="2" >単価</td>
　　<td align="center" colspan="3">当月（円）</td>
　　<td align="center" colspan="3">先月まで（円）</td>
　　<td align="center" colspan="3">累計（円）</td>
</tr>
<tr class="tdListTitle">
　　<td width="80" align="center">出来形数量</td>
　　 <td width="90" align="center" >出来高</td>
　　<td width="40" align="center">％</td>
　　<td width="80" align="center">出来形数量</td>
　　<td width="90" align="center" >出来高</td>
　　<td width="40" align="center">％</td>
　　<td width="80" align="center">出来形数量</td>
　　<td width="90" align="center" >出来高</td>
　　<td width="40" align="center">％</td>
</tr>
</table>
データ部分
<table border="1" class="tableSearch2">
Javaロジック
<tr class="tdListText">
<td width="90" ><%=showLv3%></td>
<td width="100" ><%=showLv4%></td>
<td width="110"><%=showkrk%></td>
<td width="80"><%=StringUtil.formatNum(info.getDsnsry())%></td>
<td width="35;<%=info.getTnikgo()%></td>
<td align="right" width="80"><%=StringUtil.formatNum(info.getSmktnk())%></td>
<td align="right" width="80"><%=StringUtil.formatNum(info.getTmmdkgsry())%></td>
<td align="right" width="90"><%=StringUtil.formatNum(info.getTmmdkdmny())%></td>
<td align="right" width="40" ><%=showrtuT%></td>
<td align="right" width="80"><%=StringUtil.formatNum(info.getZmmdkgsry())%></td>
<td align="right" width="90"><%=StringUtil.formatNum(info.getZmmdkdmny())%></td>
<td align="right" width="40" ><%=showrtuZ%></td>
<td align="right" width="80"><%=StringUtil.formatNum(info.getRuidkgsry())%></td>
<td align="right" width="90"><%=StringUtil.formatNum(info.getRuidkdmny())%></td>
<td align="right" width="40"><%=showrtuR%></td>
</tr>
</table>

回答No.1

ariseru

>width指定数値が無視されているように見えるのですが、IEの機能なのであればどのような仕様になっているのか教えてください。

IE以外のブラウザでもズレますよ。
原因は、大きく分けて2つかな。

1つは、ヘッダー部分とデータ部分で列数が違っているということ。
ヘッダー部分は16列あるのですが、データ部分は15列しかないので、その分のズレが発生しています。

2つ目は、ヘッダー部分とデータ部分でCELLSPACINGの値が違うということ。
CELLSPACINGの値というのは、テーブルの枠部分の太さを決めていますが、ヘッダー部では太さ0、データ部ではデフォルト値(太さ2)になっています。
この違いによって、ブラウザの表示領域の広さによっては微妙なズレが発生します。

>widthで指定したとおりに表示させるにはどうしたらよいのか

ヘッダー部の左端の列の幅を固定値にして、同じ幅の列をデータ部の左端に追加すればいい。
それだけで大きなズレはほぼ解消するはず。
あとは、CELLSPACINGの値も揃えれば完璧だと思いますが、CELLSPACINGによるズレは微妙なものですし無視してもいいかな。

お礼

ariseruさんご教授ありがとうございます。

さっそく修正します。