我制定了上述問題
其中工程JavaScript的解決方案只在Firefox 7 +中，因爲我只在FF中測試過
我來到這個線程並找到了解決方案Michael Koper
在此解決方案的三個重要事情完成
1）固定列寬
2）THEAD> TR顯示器被設置爲阻止
3）TBODY顯示設置爲阻止
爲他人提到有修復寬度的問題，我也處於相同的位置;
即使我不能固定寬度靜態
，所以我想我會動態地修正寬度（表在瀏覽器中呈現後） 和這並獲得成功:)
下面是在javascript其運作解決方案只有在FF
（我只在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顯示器設置爲阻止
希望這個解決方案是爲大家有用..
如果你可以將其擴展到其他瀏覽器請回復這個帖子
如果您有多個列，這不起作用。 – 2011-07-28 15:13:10
多列不是問題中給出的示例的一部分。 – mmcglynn 2011-08-29 19:44:44
@ mmcglynn：雖然這可能是真的，但首先要做到這一點的唯一理由是多列表，所以這是一個合理的假設。不要以面值爲準考慮所有問題。 – 2014-04-30 11:52:52