テーブルの設幅固定がオフラインで崩れます

質問

WEBサイトでテーブルのセル幅を固定しているのですが、オンライン環境では意図通りになるものの、オフライン環境では固定されずに崩れてしまいます。
固定方法は、外部CSSで「table-layout:fixed;」と「各セルのwidth指定(class)」を記述しています（下記ご参照下さい）。
外部CSSへのリンク指定は絶対パスではなく相対パスで指定しており、オフライン環境でもCSSの参照は出来ていると思います（セル幅以外の記述内容は反映されます）。
どこに原因があるのか分からずに困っています。
お分かりになる方がおられましたら、ご教示頂きたくお願い申し上げます。

【CSS】
table.t {
border:1px solid #000000;
border-collapse:collapse;
table-layout:fixed;
font-size:13px;
}

table.t td{
border:1px solid #000000;
height:13px;
}

table.t th{
border:1px solid #000000;
font-size:13px;
}

.index{
width:155px;
}
.remarks{
width:100px;
}
.code{
width:120px;
}
・
・
・

【HTML】
<table class="t">
<thead>
<tr>
<th class="index">INDEX No.</th>
<th class="remarks">Remarks</th>
<th class="code">Part code</th>
・
・
・

回答No.3

Proof4 · ベストアンサー

>No.2 補足
テーブルのwidthを数値で指定し、テーブルを囲むdiv（#header_hでしょうか？）でoverflow-x: scroll;とすると横スクロールができるようになります。
テーブルの幅を指定しないかautoにしておくと、テーブルの幅が直属のdiv要素の幅にセットされてしまいます。

お礼

その後、紆余曲折がありましたので、お知らせしておきます。

実は、widthを指定しても不具合が続きました．．．

．．．が、試行錯誤の結果、理由は分からないのですが、#header_hのposition:absoluteをposition:staticとすると解決しました。
（すみません、実は#zentaiの中に#header_hと#listの二つを入れ子にしていまして、横スクロールは#listの方にoverflow-x:scrollを指定することで実現しています。#header_hの方にスクロールバーを出したくないので。）

結果的に、VBAを修正しなくて済んだので助かりましたが、表示の崩れた原因も解決した理由も分からないままです．．．

補足

やはり、テーブルのwidthを指定しないといけないんですね．．

ググってみても、table-layout:fixed;の説明でwidth指定が必要と書いているサイトと書いていないサイトがあり、指定せずに試してみたところ、オンラインでは問題無く表示されましたので、大丈夫なのかと思っていました。

実は、HTMLファイルを自動的に作成するVBAを組んでいるのですが、ページによってテーブルの幅が異なるので、widthを指定していませんでした。

オンラインで問題なく表示されるのは、IEの何らかの機能に依存してるんですね、きっと。

仕方ないので、外部CSSではなく個別のHTMLにスタイル指定の記述を行うようにVBAを修正します。

ありがとうございました。

回答No.2

Proof4

>No.1 補足
divで囲ってあっても問題はないでしょう。
それよりも、最大の疑問がなぜオンラインで（何処かのWEBサーバーを想定しています）不具合がないのに、ローカルの環境で不具合が起こるのかということです。さらにセル幅以外の記述内容は反映されるというのですから難解です。

Ctrl + F5でキャッシュを使用せずに更新またはIEのキャッシュを削除すると反映されるようになりますでしょうか。

補足

ご回答ありがとうございます。

「Ctrl + F5でキャッシュを使用せずに更新」「IEのキャッシュを削除する」のどちらも効果はありませんでした。

起こっている現象をもう少し詳しく書きますと、<div>で規定している枠の中にテーブルを入れているわけですが、その枠の幅に合わせてセル幅が自動計算されてしまいます（本来は、枠を超えてテーブルが存在し、横スクロールバーで表示させるという形にしたい）。

IEの互換表示がオフラインでは機能しないというところ辺りが影響しているのかなという気がしているのですが、よく分かりません。

回答No.1

Proof4

ソースコードをもとにオフラインで外部CSSとして読み込んでみましたが、Win10+Chromeで問題なく適用されました。ブラウザの幅を極端に狭めるとセル幅も変わりましたが...そういうことではないですよね。
このソースを見る限りでは特に問題はないように思えます。パスも正しいということなら原因はほかにあるのかもしれません。

さらに詳細な情報があれば回答しやすいです。

補足

ありがとうございます。

こちらの環境は、Win7+IE11です。

また、テーブルを下記のように<div>で囲っていますが、それは影響しますでしょうか？

【CSS】
#zentai {
position:relative;
top:30px;
left:10px;
width:889px;
height:125px;
border:1px solid #000000;
}

#header_h {
position: absolute;
left:0px;top:0px;
overflow-x:hidden;
overflow-y:hidden;
}

【HTML】
<div id="zentai">
<div id="header_h">
<table class="t">
<thead>
<tr>
<th class="index">INDEX No.</th>
<th class="remarks">Remarks</th>
<th class="code">Part code</th>