Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Rameshwar-ghodke/8246651afaaacd7454b44f54ea0f225e to your computer and use it in GitHub Desktop.
Save Rameshwar-ghodke/8246651afaaacd7454b44f54ea0f225e to your computer and use it in GitHub Desktop.
Fixed table column at time of horizontal scroll using html css
<style>
.table-scroll {position:relative;max-width:600px;margin:auto;overflow:hidden;border:1px solid #000;}.table-wrap {width:100%;overflow:auto;}
.table-scroll table {width:100%;margin:auto;border-collapse:separate;border-spacing:0;}
.table-scroll th, .table-scroll td {padding:5px 10px;border:1px solid #000; background:#fff;white-space:nowrap; vertical-align:top;}
.table-scroll thead, .table-scroll tfoot {background:#f9f9f9;}
.clone {position:absolute;top:0;right:0;pointer-events:none;}
.clone th, .clone td {visibility:hidden}
.clone td, .clone th {border-color:transparent}
.clone tbody th {visibility:visible;color:red;}
.clone .fixed-side {border:1px solid #000;background:#eee;visibility:visible;}
.clone thead, .clone tfoot{background:transparent;}
</style>
</head>
<body>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
<th scope="col">Header 6</th>
<th scope="col">Header 7</th>
<th scope="col">Header 8</th>
<th class="fixed-side" scope="col">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell content<br>
test</td>
<td><a href="#">Cell content longer</a></td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<th class="fixed-side">Left Column</th>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<th class="fixed-side">Left Column</th>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
<td>Footer 5</td>
<td>Footer 6</td>
<td>Footer 7</td>
<td>Footer 8</td>
<th class="fixed-side">&nbsp;</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
// requires jquery library
jQuery(document).ready(function() {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment