Html CSS表列冻结

有人能帮忙吗

在firefox中，行边界似乎没有对齐。我想要一个表，其中第一列是冻结的，而其余的是可滚动的。所有行都链接到一个滚动条上，所以我可以通过MVC中的Razor视图在循环中使用

谢谢，

尝试使用

.headcol {max-width: 10em}

---

还请注意，使用

.headcol {position: absolute}

使单元格不与文档相对对齐；这就是为什么它看起来像JSBIN:

CSS

JS

---

我使用JavaScript和CSS的这种组合来解决粘性列问题

JS（注释部分有boostrap兼容的代码）

var$table=$（'.table'）；
var$fixedColumn=$table.clone（）.insertBefore（$table.addClass（'fixed-column'）；
$fixedColumn.find（'th:not（：first child），td:not（：first child），.excludeHeader'）.remove（）；
$fixedColumn.find（'tr'）。每个（函数（i，elem）{
如果（elem.rowSpan=“1”）{
$（this.height（$table.find（'tr:eq（'+i+'）））.height（）；
}
否则{
对于（x=i；x.固定柱{
位置：绝对位置；
显示：内联块；
宽度：自动；
右边框：1px实心#ddd；
/*使用带引导的z索引*/
/*z指数：9999*/
}
/*此媒体查询与我的引导容器冲突。我没有使用它*/
@介质（最小宽度：768px）{
.table>.fixed列{
显示：无；
}
}
/*如果您正在使用引导，请参阅注释部分*/
/*.table>.fixed列{
位置：绝对位置；
显示：内联块；
宽度：自动；
右边框：1px实心#ddd；
背景色：#ffffff；
}*/

这说明th或td的行间距是否也大于1

.headcol {max-width: 10em}

.headcol {position: absolute}

...
.freeze td:nth-child(1), 
.freeze th:nth-child(1) {  
  background: #ddd;
  position: absolute;  
  width: 20px;
  left: 0;
}
.freeze .bottomScroll {  
  overflow-x: hidden;
  margin-left: 20px;
}
...

var ns = $('.newScroll', table),
    bs = $('.bottomScroll', table);
ns.scroll(function(){bs.scrollLeft(ns.scrollLeft());});