HTML table with horizontal scrolling first column fixed

Question

I have been trying to think of a way to make a table with a fixed first column  and the rest of the table with a horizontal overflow   I saw a post which had a similar question  but the fixed column bit did not seem to be resolved   Help

User · Accepted Answer

I have a similar table styled like so    lt table style  width 100   table-layout fixed  gt       lt tr gt           lt td style  width  150px  gt Hello  World  lt  td gt           lt td gt               lt div gt                   lt pre style  margin 0  overflow scroll  gt My preformatted content lt  pre gt               lt  div gt           lt  td gt       lt  tr gt   lt  table gt

User · Answer

Use jQuery DataTables plug-in  it supports fixed header and columns  This example adds fixed column support to the html table  example    http   datatables net extensions fixedcolumns   For two fixed columns   http   www datatables net release-datatables extensions FixedColumns examples two columns html

User · Answer

Take a look at this JQuery plugin   http   fixedheadertable com  It adds vertical  fixed header row  or horizontal  fixed first column  scrolling to an existing HTML table  There is a demo you can check for both cases of scrolling

User · Answer

Based on skube s approach  I found the minimal set of CSS I needed was    x000D   x000D   horizontal-scroll-except-first-column   x000D    width  100   x000D    overflow  auto  x000D    x000D   x000D   horizontal-scroll-except-first-column  gt  table   x000D    margin-left  8em  x000D    x000D   x000D   horizontal-scroll-except-first-column  gt  table  gt     gt  tr  gt  th first-child  x000D   horizontal-scroll-except-first-column  gt  table  gt     gt  tr  gt  td first-child   x000D    position  absolute  x000D    width  8em  x000D    margin-left  -8em  x000D    background   ccc  x000D    x000D   x000D   horizontal-scroll-except-first-column  gt  table  gt     gt  tr  gt  th  x000D   horizontal-scroll-except-first-column  gt  table  gt     gt  tr  gt  td   x000D       Without this  if a cell wraps onto two lines  the first column x000D       will look bad  and may need padding     x000D    white-space  nowrap  x000D    x000D   lt div class  horizontal-scroll-except-first-column  gt  x000D     lt table gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt FIXED lt  td gt   lt td gt 22222 lt  td gt   lt td gt 33333 lt  td gt   lt td gt 44444 lt  td gt   lt td gt 55555 lt  td gt   lt td gt 66666 lt  td gt   lt td gt 77777 lt  td gt   lt td gt 88888 lt  td gt   lt td gt 99999 lt  td gt   lt td gt AAAAA lt  td gt   lt td gt BBBBB lt  td gt   lt td gt CCCCC lt  td gt   lt td gt DDDDD lt  td gt   lt td gt EEEEE lt  td gt   lt td gt FFFFF lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

How about    x000D   x000D  table   x000D    table-layout  fixed   x000D    width  100   x000D     margin-left  -100px    ie7   x000D    x000D  td  th   x000D    vertical-align  top  x000D    border-top  1px solid  ccc  x000D    padding  10px  x000D    width  100px  x000D    x000D   fix   x000D    position  absolute  x000D     position  relative    ie7   x000D    margin-left  -100px  x000D    width  100px  x000D    x000D   outer   x000D    position  relative  x000D    x000D   inner   x000D    overflow-x  scroll  x000D    overflow-y  visible  x000D    width  400px   x000D    margin-left  100px  x000D    x000D   lt div class  outer  gt  x000D     lt div class  inner  gt  x000D       lt table gt  x000D         lt tr gt  x000D           lt th class fix gt  lt  th gt  x000D           lt th gt Col 1 lt  th gt  x000D           lt th gt Col 2 lt  th gt  x000D           lt th gt Col 3 lt  th gt  x000D           lt th gt Col 4 lt  th gt  x000D           lt th class  fix  gt Col 5 lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th class fix gt Header A lt  th gt  x000D           lt td gt col 1 - A lt  td gt  x000D           lt td gt col 2 - A  WITH LONGER CONTENT  lt  td gt  x000D           lt td gt col 3 - A lt  td gt  x000D           lt td gt col 4 - A lt  td gt  x000D           lt td class fix gt col 5 - A lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th class fix gt Header B lt  th gt  x000D           lt td gt col 1 - B lt  td gt  x000D           lt td gt col 2 - B lt  td gt  x000D           lt td gt col 3 - B lt  td gt  x000D           lt td gt col 4 - B lt  td gt  x000D           lt td class fix gt col 5 - B lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th class fix gt Header C lt  th gt  x000D           lt td gt col 1 - C lt  td gt  x000D           lt td gt col 2 - C lt  td gt  x000D           lt td gt col 3 - C lt  td gt  x000D           lt td gt col 4 - C lt  td gt  x000D           lt td class fix gt col 5 - C lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    You can test it out in this jsbin  http   jsbin com uxecel 4 edit

[html] HTML table with horizontal scrolling (first column fixed)

Examples related to html

Examples related to overflow

Examples related to html-table

Examples related to fixed