How to make the some columns fixed and some scrollable of a table?

Question

I am developing a web page using twitter-bootstrap 3 and some tables are not fitting my page's margins. They overflow. So I want to create a structure which works like Excel spreadsheet.

The most left two columns (blue region) will be fixed and the remainin columns will be shown as possible. Overflowing columns will be displayed if user scrolls the table's scroll bar to right. You can see the picture how I want it to be.

Putting the table into a div and rule the div overflow-x:scroll is not a solution for me. Because The first two columns must be visible all the time.

There is a solution here I have tried this. It works only when I shrink the window into smaller width value.

Answer 1

Seems to me that you could use a jquery dataTable along with the FixedColumns plugin - it does exactly what you want by default. Just include jquery.dataTables.js and jsfixedColumns.min.js (along with the css files) from the CDN and initialize your table :

var table = $('#example').DataTable( {
  sScrollX: "100%",
  sScrollXInner: "150%",
  bScrollCollapse: true        
});
new $.fn.dataTable.FixedColumns(table);

see demo -> http://jsfiddle.net/n2x8W/

dataTables supports bootstrap and you can style the table as you want. In the example I have just included the not-so-modern default CSS. Notice, the initialization exposes dataTables basic features like pagination, filtering etc. They can easily be plugged off if you not need / want them.

Also notice that I am using version 1.9.4, since this to my experience is more stable than 1.10.x.

Answer 2

You could try this:
Wrap your table in a div,
Absolute position your first 2 columns, give them some width (Lets say Apx and Bpx),
Use margin-left:(A+B)px and overflow-x:scroll to the wrapper div

Fiddle: http://jsfiddle.net/ycYdL/

Answer 3

Unfortunately not. You will need a table for the fixed part, and a table for the scrolling part.

To avoid the problem of rows no longer being the same height, consider actually duplicating the "fixed" columns from the original table and overlaying them on your scrollable area. This will look visually identical (provided you set a solid background colour on the fixed area), but will ensure the table works as intended.

Answer 4

there are certain tools which can help you with that problem.

I'd give datatables a go, they offer an options that does exactly that, maybe with a few variations.

have a look here: http://datatables.net/examples/basic_init/scroll_y.html

Answer 5

You could place the table into a div that would fit to the size of your screen and then overflow auto that div

Answer 6

This can be done, but it's not exactly straightforward . . .

You basically are going to need to create two tables:

1. A thin table on the left side, that is made up of the row headers (i.e., the stuff in blue).

2. A second table, in a div, immediately to the right of the first table, that will contain the data fields for the rows. The div would then need to have the overflow-x: scroll; style attached to it.

I've not done this with horizontal scrolling before, but I have done it with vertical (top row stays put, the rest scroll), and the concept should work the same way here.

A couple of things to be aware of:

• the CSS to enforce matching row heights is going to be VERY important here . . . getting that to match up is much more complex with a horizontal scroll, than a vertical one
• if you have any accessibility requirements (e.g., screen reader support), you will may have to include a hidden "header column" in the second table, that is a duplicate of the static one in the first table, so that the screen reader will associate the row headers with each data cell.