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/
سؤال
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.
المحلول 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/
نصائح أخرى
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.
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.
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
You could place the table into a div that would fit to the size of your screen and then overflow auto that div
This can be done, but it's not exactly straightforward . . .
You basically are going to need to create two tables:
A thin table on the left side, that is made up of the row headers (i.e., the stuff in blue).
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: