How to make multiple left columns fixed and scroll the the rest columns in HTML table?


Tags: html,css,html5,css3,html-table

Problem :

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

I tried the solution like

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

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?



Solution :

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

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

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

Hope this solves your problem.


    CSS Howto..

    How to set a css style to the last item of CListView?

    how to achieve facebook mobile site buttons menu scroll effect?

    “How to Ask” box when typing a question in SO. How do get that scrolling effect? Pure CSS or JS?

    How to keep animated gifs animated while scrolling on iOS devices?

    How to reference / link to a Css-File styling elements in a webview for Android

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to make a content property in css use php

    How can I add image to facebook login button?

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

    CSS how to change page content depending on page size (zoom) in responsive design

    How to make an Image overlay the site on click?

    How to make a better transition of

    CSS: How to get rid of the extra space of first line of a paragraph?

    How to set full auto width for input tag

    How to make css width work in firefox

    How to select nth child of specific tag with css?

    How to show only the div with id while hiding other divs using CSS only

    How to make section be tall enough to store data (fullpage.js)?

    How to setup a ASP template

    Showing the selected value on the handler of range input as the value changes

    CSS - How to Draw a Multi-Coloured Line?

    How do I keep floated child divs from wrapping?

    How to add padding to the outside of an input in css

    How can I use :before property to create a square before a span

    How to create CSS file within PHP code [closed]

    How to have a backgroud image 100% width / height inside a
  • ?
  • How to make font-size less for 2px than parent element?

    How to create a Page Header (an Image) for print using css

    How to get Mouse Out effect in CSS

    How to include several nested CSS classes into rails .erb file?