Question

最初我问了this问题并编写了我自己的插件来实现同样的目标，但我面临着关于表css的非常奇怪的问题。
应用插件表后，单元格边框将被取消排序。

在小提琴中，您可以看到在第一个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/

Answer 2

如何更换'＆lt; th＆gt;'标有'＆lt; td＆gt;'的标签标签

不需要额外的js代码。

http://jsfiddle.net/spQAh/7/

Answer 3

好的，我没有进行故障排除或使用任何复杂的东西，而是为您的问题提出了简单的CSS + JS解决方案。看看http://jsfiddle.net/TdLQT/

显然，使标题静态化的过程可以是动态的，意味着在用户滚动一下后触发它或默认将其置于那里或从顶部窗口计算其他对象的位置并在达到或超过某些像素时触发静态行为。如果您向我提供有关HTML页面的确切设计的详细信息，我可以提供。

无论如何，我可以看到，使用固定的像素高度，你可以选择不使用或使它们具有弹性或动态。重要的是要知道，虽然解决方案依赖于JS，但输出位置完全来自CSS。我正在使用类来操纵位置。

Answer 4

实际上，Chris Coyer的CSS-Tricks曾经对如何完成您正在寻找的内容做了非常有用的screencast。链接将很快添加到此答案中。

Answer 5

简单的解决方案是，当您计算列的宽度时，不包括填充。所以你需要更改一行

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

到

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

如果您的单元格有边距，则使用.outerWidth（true）

这在使用IE7＆amp; 8的怪癖模式下工作，Chrome IE8在严格模式下有问题。但是我认为这个问题是由添加的滚动条引起的。如果要在严格模式下使用IE8，则必须允许垂直滚动条的宽度。

试图修复表头，获取css问题

6 个答案: