我为上述问题开发了 javascript 解决方案,该解决方案
仅适用于 Firefox 7+,因为我仅在 FF 中进行了测试
我来到这个线程并找到了Michael Koper指出的解决方案
在这个解决方案中,完成了三件重要的事情
1) 固定列宽
2) thead > tr display 设置为 block
3) tbody display 设置为 block
正如其他人提到的固定宽度的问题,我也处于相同的位置;
即使我不能静态地固定宽度
所以我想我会动态地固定宽度(在浏览器中呈现表格之后),这就是诀窍:)
以下是仅适用于 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 显示设置为阻止
希望这个解决方案对大家有用..
如果您可以将其扩展到其他浏览器,请回复此帖子