修复html表中的多个列（JQuery） [英] Fix multiple columns in html table (JQuery)

问题描述

我正在寻找一种方法来冻结html表中的前三列。表格示例： http://jsfiddle.net/ee6reLug/

I am looking for a way to freeze first three columns in html table. Sample of table: http://jsfiddle.net/ee6reLug/

<table>
...
</table>

列列名1，+和列名2必须是固定的，并且可以从左向右滚动。

Columns Column name1, "+" and Column name2 must be fixed and scrollable from left to right.

单个固定左栏有一个演示，
如何创建一个带有固定/冻结左列和可滚动体的HTML表？

There is a demo for single fixed left column, how do I create an HTML table with fixed/frozen left column and scrollable body?

但我需要修复多列。是否有可能在html，javascript或jquery？

but I need multple columns fixed. Is it possible in html, javascript or jquery?

推荐答案

回答迟到..但对搜索解决方案的人有用

answering it late.. but useful for someone searching for a solution

我已将您的代码更改为 - > http://jsfiddle.net/PrateekPatra26/ee6reLug/5/

I've changed your code to this --> http://jsfiddle.net/PrateekPatra26/ee6reLug/5/

将表分为两个，一个包含3列，其余表包含在另一个表中。把它们放入div并给它们特定的宽度。

Separated the tables into two, one with 3 columns and the remaining table into another. Put them into div's and gave them specific width.

css：

.pull-left {
    float: left!important
}
.pull-right {
    float: right!important
}
th{
    height:40px;
}
td{
    height:60px;
}

div's：

<div style="width:100%" class="pull-left">
    <div class='pull-left' style='width:30%'>
       <table>
       .
       .
       .
       </table>
    </div>
    <div class='pull-right' style='width:70%;overflow-x:auto'>
       <table>
       .
       .
       .
       </table>
    </div>
</div>

这篇关于修复html表中的多个列（JQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！