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?
This question is related to
html
overflow
html-table
fixed
How about:
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_
}<div class="outer">_x000D_
<div class="inner">_x000D_
<table>_x000D_
<tr>_x000D_
<th class=fix></th>_x000D_
<th>Col 1</th>_x000D_
<th>Col 2</th>_x000D_
<th>Col 3</th>_x000D_
<th>Col 4</th>_x000D_
<th class="fix">Col 5</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<th class=fix>Header A</th>_x000D_
<td>col 1 - A</td>_x000D_
<td>col 2 - A (WITH LONGER CONTENT)</td>_x000D_
<td>col 3 - A</td>_x000D_
<td>col 4 - A</td>_x000D_
<td class=fix>col 5 - A</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th class=fix>Header B</th>_x000D_
<td>col 1 - B</td>_x000D_
<td>col 2 - B</td>_x000D_
<td>col 3 - B</td>_x000D_
<td>col 4 - B</td>_x000D_
<td class=fix>col 5 - B</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<th class=fix>Header C</th>_x000D_
<td>col 1 - C</td>_x000D_
<td>col 2 - C</td>_x000D_
<td>col 3 - C</td>_x000D_
<td>col 4 - C</td>_x000D_
<td class=fix>col 5 - C</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
</div>You can test it out in this jsbin: http://jsbin.com/uxecel/4/edit
Take a look at this JQuery plugin:
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.
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
Based on skube's approach, I found the minimal set of CSS I needed was:
.horizontal-scroll-except-first-column {_x000D_
width: 100%;_x000D_
overflow: auto;_x000D_
}_x000D_
_x000D_
.horizontal-scroll-except-first-column > table {_x000D_
margin-left: 8em;_x000D_
}_x000D_
_x000D_
.horizontal-scroll-except-first-column > table > * > tr > th:first-child,_x000D_
.horizontal-scroll-except-first-column > table > * > tr > td:first-child {_x000D_
position: absolute;_x000D_
width: 8em;_x000D_
margin-left: -8em;_x000D_
background: #ccc;_x000D_
}_x000D_
_x000D_
.horizontal-scroll-except-first-column > table > * > tr > th,_x000D_
.horizontal-scroll-except-first-column > table > * > tr > 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_
}<div class="horizontal-scroll-except-first-column">_x000D_
<table>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>FIXED</td> <td>22222</td> <td>33333</td> <td>44444</td> <td>55555</td> <td>66666</td> <td>77777</td> <td>88888</td> <td>99999</td> <td>AAAAA</td> <td>BBBBB</td> <td>CCCCC</td> <td>DDDDD</td> <td>EEEEE</td> <td>FFFFF</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
</div>Source: Stackoverflow.com