Created
March 16, 2018 11:51
-
-
Save anonymous/a7399b15105103aff38abd6478025c2f to your computer and use it in GitHub Desktop.
HTML table with vertical scroll inside tbody (source: https://jsfiddle.net/hashem/CrSpu/555/)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
table.scroll { | |
/* width: 100%; */ /* Optional */ | |
/* border-collapse: collapse; */ | |
border-spacing: 0; | |
border: 2px solid black; | |
} | |
table.scroll tbody, | |
table.scroll thead { display: block; } | |
thead tr th { | |
height: 30px; | |
line-height: 30px; | |
/* text-align: left; */ | |
} | |
table.scroll tbody { | |
height: 100px; | |
overflow-y: auto; | |
overflow-x: hidden; | |
} | |
tbody { border-top: 2px solid black; } | |
tbody td, thead th { | |
/* width: 20%; */ /* Optional */ | |
border-right: 1px solid black; | |
/* white-space: nowrap; */ | |
} | |
tbody td:last-child, thead th:last-child { | |
border-right: none; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<table class="scroll"> | |
<thead> | |
<tr> | |
<th>Head 1</th> | |
<th>Head 2</th> | |
<th>Head 3</th> | |
<th>Head 4</th> | |
<th>Head 5</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>Content 1</td> | |
<td>Content 2</td> | |
<td>Content 3</td> | |
<td>Content 4</td> | |
<td>Content 5</td> | |
</tr> | |
<tr> | |
<td>Content 1</td> | |
<td>Lorem ipsum dolor sit amet.</td> | |
<td>Content 3</td> | |
<td>Content 4</td> | |
<td>Content 5</td> | |
</tr> | |
<tr> | |
<td>Content 1</td> | |
<td>Content 2</td> | |
<td>Content 3</td> | |
<td>Content 4</td> | |
<td>Content 5</td> | |
</tr> | |
<tr> | |
<td>Content 1</td> | |
<td>Content 2</td> | |
<td>Content 3</td> | |
<td>Content 4</td> | |
<td>Content 5</td> | |
</tr> | |
<tr> | |
<td>Content 1</td> | |
<td>Content 2</td> | |
<td>Content 3</td> | |
<td>Content 4</td> | |
<td>Content 5</td> | |
</tr> | |
<tr> | |
<td>Content 1</td> | |
<td>Content 2</td> | |
<td>Content 3</td> | |
<td>Content 4</td> | |
<td>Content 5</td> | |
</tr> | |
<tr> | |
<td>Content 1</td> | |
<td>Content 2</td> | |
<td>Content 3</td> | |
<td>Content 4</td> | |
<td>Content 5</td> | |
</tr> | |
</tbody> | |
</table> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Change the selector if needed | |
var $table = $('table.scroll'), | |
$bodyCells = $table.find('tbody tr:first').children(), | |
colWidth; | |
// Adjust the width of thead cells when window resizes | |
$(window).resize(function() { | |
// Get the tbody columns width array | |
colWidth = $bodyCells.map(function() { | |
return $(this).width(); | |
}).get(); | |
// Set the width of thead columns | |
$table.find('thead tr').children().each(function(i, v) { | |
$(v).width(colWidth[i]); | |
}); | |
}).resize(); // Trigger resize handler |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment