上記の問題に対する JavaScript ソリューションを開発しました
。これは Firefox 7 以降でのみ機能します。これは FF でのみテストし
たためです。このスレッドに来て、Michael Koperが指摘する解決策を見つけました。
このソリューションでは、3 つの重要な処理が行われます
。1) 列幅を修正します
。2) thead > tr 表示をブロックに設定します
。3) tbody 表示をブロックに設定します。
他の人が幅を修正する問題があると述べたように、私も同じ立場にいます。
幅を静的に修正することさえできません
だから私は幅を動的に修正すると思った（テーブルがブラウザでレンダリングされた後）そしてこれはトリックをした:)
以下は、FFでのみ機能するjavascriptのソリューションです
（私はFFでのみテストしました。他のブラウザにはアクセスできません）
function test1(){
var tbodys = document.getElementsByTagName("TBODY");
for(var i=0;i<tbodys.length;i++){
do_tbodyscroll(tbodys[i]);
}
}
function do_tbodyscroll(_tbody){
// get the table node
var table = _tbody.parentNode;
// first row of tbody
var _fr = _tbody.getElementsByTagName("TR")[0];
// first row cells ..
var _frcells = _fr.cells;
// Width array , width of each element is stored in this array
var widtharray = new Array(_frcells.length);
for(var i=0;i<_frcells.length;i++){
widtharray[i] = _frcells[i].scrollWidth;
}
// Apply width to first row
for(var i=0;i<_frcells.length;i++){
_frcells[i].width = widtharray[i];
}
// Get the Last row in Thead ...
// COLGROUPS USING COLSPAN NOT YET SUPPORTED
var thead = table.getElementsByTagName("THEAD")[0];
var _rows = thead.getElementsByTagName("TR");
var tableheader = _rows[_rows.length - 1];
var headercells = tableheader.cells;
// Apply width to header ..
for(var i=0;i<headercells.length;i++){
headercells[i].width = widtharray[i];
}
// ADD 16 Pixel of scroll bar to last column ..
headercells[headercells.length -1 ].width = widtharray[headercells.length -1] + 16;
tableheader.style.display = "block";
_tbody.style.display = "block";
}
このソリューションは、ブラウザーからの列の幅を調べ
、幅が設定された後に
同じ幅を列 (ヘッダーと tbody の最初の行) に再度設定します。
thead > tr および tbody 表示がブロックに設定されている
このソリューションが皆さんにとって役立つことを願っています..
他のブラウザに拡張できる場合は、この投稿に返信してください