Skip to content

Instantly share code, notes, and snippets.

@Rameshwar-ghodke

Rameshwar-ghodke/Fixed table column at time of horizontal scroll

Created June 16, 2021 08:07
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.
Download ZIP
Fixed table column at time of horizontal scroll using html css
Raw
Fixed table column at time of horizontal scroll
<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