如何使多个左列固定并滚动HTML表中的其余列?

I am having trouble of freezing multiple columns or column-group and making the rest columns scrollable.

我遇到了冻结多个列或列组并使rest列可滚动的问题。

I tried the solution like

我尝试过解决方法

how do I create an HTML table with fixed/frozen left column and scrollable body?

如何使用固定/冻结的左列和可滚动体创建HTML表?

but it only works for one column. If I try to freeze multiple columns, they overlapped each other.

但它只适用于一列。如果我试图冻结多个列，它们互相重叠。

I also do not want to use multiple tables which will be difficult for dynamic data binding.

我也不希望使用多个表，这对于动态数据绑定来说很困难。

Does anyone know a simple solution for this case only using CSS?

有人知道一个简单的解决方案吗?

1 个解决方案

#1

There is one jQuery Plugin "DataTable". This will help you to freeze any number of columns in your table.

有一个jQuery插件“DataTable”。这将帮助您冻结表中任何数量的列。

Check the tutorials here. http://www.datatables.net/extensions/fixedcolumns/

检查这里的教程。http://www.datatables.net/extensions/fixedcolumns/

http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html

http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html

Hope this solves your problem.

希望这能解决你的问题。