javascript - 尝试修复表头，出现 css 问题

Question

最初我问 this问题并编写了我自己的插件来实现相同的目标，但我面临着关于表格 css 的非常奇怪的问题。
应用插件表格单元格边框后变得乱七八糟。

问题的jsFiddle:Problem demo

在 fiddle 中，您可以看到在第一个 tr 的第一个单元格之后，表头边框线和表格边框线不对齐。我要thead的边界线细胞和 td要排列的单元格。
谁能告诉我如何实现这一目标？

Answer 1

看起来您所要做的就是考虑填充:每个单元格的左右都有 3 px 填充，因此您必须在宽度上添加 6 px:

$t.find('tr:first th').each(function(){cols.push($(this).width()+6);});

否则，内部只有一个单词的单元格会将实际宽度“推”得更宽一些，以便单词适合，而其他有移动空间的单元格将通过变得更窄来补偿。标题和正文都使用不同的内容独立执行此操作，这会导致实际单元格宽度的差异。

编辑 :对于 Firefox，您还需要加宽表格以适应单元格。计算列宽后添加

var actualWidth = $t.width()+cols.length*6;
$t.width( actualWidth );

然后将包装器更改为:

$wrap.css({width:actualWidth,height:o.height,overflow:'auto'});

编辑 2 :要同时滚动标题和正文，您需要将它们都包装到处理滚动的外部 div 中。

var $outerWrap = $( '<div>' ).css( {width:"300px", overflow:'auto' } );
var $wrap=$('<div>').css(
 { width:actualWidth,height:o.height,"overflow-y":'auto', "overflow-x":'hidden' }
);

$firstRow.wrap( $outerWrap );
$firstRow.after( $wrap );
$wrap.append( $t );

演示:http://jsfiddle.net/YcRTz/2/