How to make some columns fixed and scrollable in a table?

Question

I am designing a webpage using twitter-bootstrap 3 and some tables do not match my page margins. They are overflowing. So I want to create a structure that works like an Excel spreadsheet.

The leftmost two columns (blue area) will be fixed, and the columns will remain as possible. Overflow columns will be displayed if the user scrolls the scroll bar of the table to the right. You can see the picture as I want it.

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

There is a solution here. I tried this. It only works when I reduce the window to a smaller width value.

Answer 1

You can try the following:
Wrap your table in a div,
Absolute position of your first 2 columns, give them some width (say Apxu Bpx),
Use margin-left:(A+B)pxand overflow-x:scrollto wrap the div

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

Answer 2

, jquery dataTable FixedColumns - , . jquery.dataTables.js jsfixedColumns.min.js( css ) CDN :

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

. → http://jsfiddle.net/n2x8W/

dataTables , . CSS . , dataTables, , .. , / .

, 1.9.4, , 1.10.x.

Answer 3

, . .

, , , "" . ( , ), , .

Answer 4

, .

datatables go, , , , .

: http://datatables.net/examples/basic_init/scroll_y.html

Answer 5

div, , , div

Answer 6

, .,.

:

• , (.. ).

• div , . div overflow-x: scroll;.

, ( , ), .

, :

• CSS ., , .
• - (, ), " " , , .