This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I have a page with the following layout requirements:
a header with a fixed height
a footer with a fixed height
2 divs (one on the left, one on the right) in the centre of the page who's height fills the space between the header and the footer
a table inside the left div
Visually this should look as follows:
And I have gotten this working in code here: https://jsfiddle.net/1kxtby5c/2/
body {
background-color: pink;
padding: 0;
margin: 0;
}
.wrap {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.top {
background-color: red;
height: 100px;
}
.middle {
background-color: lightblue;
flex: 1;
}
.bottom {
background-color: green;
height: 100px;
}
.inner-window {
background-color: peachpuff;
height: 100%;
width: 45%;
}
#left {
float: left;
}
#right {
float: right;
}
The problem is that the table (being populated with an AJAX request) will be very tall. When the table height exceeds the height of the left div, I want the table to overflow and scroll, like this:
However what is actually happening is that the div height is growing to accommodate the table, and so the header and footer are being pushed off the page. You can see this here: https://jsfiddle.net/n8o065y2/
I understand that this happens because I have told the middle div to grow, but I don't know how to tell it "grow to fill the space between the header and footer, then stop growing to accommodate the tables large height".
Thanks!
You need to implement this inside your project.
Main fixes:
middle .body { overflow: auto; }
left container .left { overflow: auto; }
removed float: right / left. made middle body flex and flex: 1 to children.
Then right and left margin accordingly.
Check the snippet or your JSFiddle here
.main-container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background-color: orange;
height: 50px;
}
.body {
flex: 1;
display: flex;
overflow: auto;
background-color: lightblue;
}
.left {
flex: 1;
overflow: auto;
margin-right: 5%;
background-color: white;
}
.right {
flex: 1;
background-color: pink;
margin-left: 5%;
}
.footer {
background-color: black;
height: 50px;
}
body {
height: 100vh;
margin: 0;
}
<div class="main-container">
<div class="header"></div>
<div class="body">
<div class="left">
<table>
<thead>
<tr>
<th>Header One</th>
<th>Header Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
</div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
I want to create a dynamically spinner in a table tbody bootstrap 4.
I have tried this way:
HTML
<div class="container mt-2">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div>
<span class="table-title">table</span>
</div>
<hr>
<div class="table-responsive text-nowrap">
<table id="contact-list" class="table table-striped table-bordered table-sm bstable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Click</th>
</tr>
</thead>
<tbody>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
CSS
.bstable tbody {
position: relative;
}
.bstable tbody .overlay-spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
JS
var s = '<div class="spinner-grow text-primary spinner-grow-sm mt-2"><span class="sr-only">Loading...</span></div>;
$( '.bstable' ).find( 'tbody' ).append( '<div class="overlay-spinner text-center">' + s + '</div>' );
With firefox the spinner is correctly shown in tbody, while with the other browsers (chrome, edge, explorer) the spinner is shown above the table.
See my JSFiddle
Unfortunately I can not understand where the problem is.
Can you help me to solve my problem?
Thanks
please add the spinner to the div around your table and not to the table body in JS. Then adjust it with top 50% and left 50% and reduce this alignment by the height and width of the spinner to adjust it right in the middle. after that i removed the bottom margin from the tables parent div to get the spinner exactly in the middle of the table.
var s = '<div class="spinner-grow text-primary spinner-grow-sm mt-2"><span class="sr-only">Loading...</span></div>';
$('.table-responsive').append('<div class="overlay-spinner text-center">' + s + '</div>');
table.table {
margin-bottom: 0;
}
.table-responsive {
position: relative;
margin-bottom: 1rem;
}
.overlay-spinner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -1rem;
margin-left: -1rem;
z-index: 10;
background-color: rgba(0, 0, 0, 0);
/*dim the background*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-2">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div>
<span class="table-title">TABLE</span>
</div>
<hr>
<div class="table-responsive text-nowrap">
<table id="contact-list" class="table table-striped table-bordered table-sm bstable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Click</th>
</tr>
</thead>
<tbody>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Find below solution.
I've done it with 'tr' tag for wrapper element of the loader.
Loader stays vertically in center dispute of rows added.
But you need to explicitly set colspan when ever new column is added or removed, to keep the loader horizontally center.
Replace 'loading' text with your loader animation.
table {
position: relative;
}
tbody {
background-color: yellow;
position: relative;
}
.loading {
position: absolute;
background: antiquewhite;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: fit-content;
width: fit-content;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Click</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr class="loading">
<td colspan="3">
loading
</td>
</tr>
</tbody>
</table>
I am facing problem while setting tbody height width overflow-y: scroll.
I tried this CSS
.table-status-sheet tbody{
min-height: 300px;
overflow-y: auto;
}
This is my table code
<div class="responsive-table table-status-sheet">
<table class="bordered">
<thead>
<tr>
<th class="center">No.</th>
<th class="center">Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Category1</td>
</tr>
<tr>
<td>2</td>
<td>Category2</td>
</tr>
<tr>
<td>3</td>
<td>Category3</td>
</tr>
<tr>
<td>4</td>
<td>Category4</td>
</tr>
</tbody>
</table>
</div>
This code is working in bootstrap but not worked in 'Materialized' theme.
Please help me fix this issue.
Here is how you can do it.
JSFiddle DEMO
tbody {
display: block;
height: 150px;
overflow: auto;
}
thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
thead {
width: calc( 100% - 1em )
}
table {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<div class="responsive-table table-status-sheet">
<table class="bordered">
<thead>
<tr>
<th class="center">No.</th>
<th class="center">Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Category1</td>
</tr>
<tr>
<td>2</td>
<td>Category2</td>
</tr>
<tr>
<td>3</td>
<td>Category3</td>
</tr>
<tr>
<td>4</td>
<td>Category4</td>
</tr>
</tbody>
</table>
</div>
solution found in another Q: How to set tbody height with overflow scroll
you have to set tbody to -> display:block;
table ,tr td{}
tbody {
display:block;
height:50px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em );
}
table {
width:400px;
}
If you put the below code in fullscreen, the elements are only centering on the page once I'm zoomed in enough. How can I make it so it's centered regardless?
.col-centered {
float: none;
text-align: center;
}
.col-centered table {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class='quiz-list'>
<div class='row'>
<div class='col-md-4 col-centered'>
This text should be centered and the table underneath should be centered as well
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Because Bootstrap.
The default value for width on a .col-md-4 is 33.3333%. So, since the div doesn't have float or margins or anything, it is simply aligned to the left side of the screen, and the content inside it is centred all right, but that isn't noticeable.
One solution is to remove the col-md-4 class.
.col-centered {
float: none;
text-align: center;
}
.col-centered table {
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class='quiz-list'>
<div class='row'>
<div class='col-centered'> <!-- this -->
This text should be centered and the table underneath should be centered as well
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I tried other solutions as well, such as setting the width or the margins explicitly, but that doesn't seem to work.
Edit:
Oh, I see why the other solutions don't work: because in this snippet the Bootstrap css is loaded after the style block in the page.
Under normal circumstances, putting things in a stylesheet after loading the Bootstrap stylesheet will work fine to override it. So you can use width:auto or margin:0 auto, whatever you like.
In css file, Update
.col-centered {
float: none;
text-align: center;
}
as
.col-centered {
float: none !important;
text-align: center;
margin: 0 auto;
}
I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.
<div id="table-wrapper">
<div id="table-scroll">
<table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
<thead>
<tr>
<th>Order ID</th>
<th>Order Date</th>
<th>Status</th>
<th>Vol Number</th>
<th>Bonus Paid</th>
<th>Reason for no Bonus</th>
</tr>
</thead>
<tbody>
<tr>
<td><%=snd.getOrderId()%></td>
<td><%=snd.getDateCaptured()%></td>
<td><%=snd.getOrderStatus()%></td>
<td>Data Not Available</td>
<td>Data Not Available</td>
<td>Data Not Available</td>
</tr>
</tbody>
</table>
</div>
</div>
Below is my CSS, which I am using for the above div:
#table-wrapper {
position:relative;
}
#table-scroll {
height:250px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#table-wrapper table * {
background:white;
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
How about doing something like this? I've made it from scratch...
What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div element with a fixed height, and to enable scroll, am using overflow-y: auto;
Also make sure you use table-layout: fixed; with fixed width td elements so that your table doesn't break when a string without white space is used, so inorder to break that string am using word-wrap: break-word;
Demo
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>
Using position: sticky on th will do the trick.
Note: if you use position: sticky on thead or tr, it won't work.
https://jsfiddle.net/hrg3tmxj/
Some of these answers seem unnecessarily complex. Make your tbody:
display: block; height: 300px; overflow-y: auto
Then manually set the widths of each column so that the thead and tbody columns are the same width. Setting the table's style="table-layout: fixed" may also be necessary.
None of the other examples provided worked in my case - e.g. header would not match table body content when scrolling. I found a much simpler and clean way, allowing you to setup the table the normal way, and without too much code.
Example:
.table-wrapper{
overflow-y: scroll;
height: 100px;
}
.table-wrapper th{
position: sticky;
top: 0;
background-color: #FFF;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Thanks to https://algoart.fr/articles/css-table-fixed-header
I think you need something like this ?
.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid grey;}
</style>
<table class="table">
<thead>
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
<th>Judul4</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="table-wrap" >
<table class="table-dalam">
<tbody>
<?php foreach(range(1,10) as $i): ?>
<tr >
<td class="td-nya">td1 </td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Source
I needed the same and this solution worked the most simple and straightforward way:
http://www.farinspace.com/jquery-scrollable-table-plugin/
I just give an id to the table I want to scroll and put one line in Javascript. That's it!
By the way, first I also thought I want to use a scrollable div, but it is not necessary at all. You can use a div and put it into it, but this solution does just what we need: scrolls the table.
This is my "crutches" solution by using html and css.
There used 2 tables and fixed width of tables and table cell`s
https://jsfiddle.net/babaikawow/s2xyct24/1/
HTML:
<div class="container">
<table class="table" border = 1; > <!-- fixed width header -->
<thead >
<tr>
<th class="tbDataId" >№</th>
<th class="tbDataName">Працівник</th>
<th class="tbDataData">Дата</th>
<th class="tbDataData">Дійсно до</th>
<th class="tbDataDiseases">Критерій1</th>
<th class="tbDataDiseases">Критерій2</th>
<th class="tbDataDiseases">Критерій3</th>
<th class="tbDataDiseases">Критерій4</th>
<th class="tbDataDiseases">Критерій5</th>
</tr>
</thead>
</table>
<div class="scrollTable"> <!-- scrolling block -->
<table class="table" border = 1;>
<tbody>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
.container{
width:1000px;
}
.scrollTable{
overflow: scroll;
overflow-x: hidden;
height: 100px;
}
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse;
}
/* Styles of the th and td */
/* Id */
.tbDataId{
width:5%;
}
/* Дата,
Дійсно до */
.tbDataData{
/*width:170px;*/
width: 15%;
}
/* П І Б */
.tbDataName{
width: 15%;
}
/*Критерії */
.tbDataDiseases{
width:10%;
}
A Fiddle would have been more helpful nevertheless from what I understand, I guess what you need is persistent headers, look into this
http://css-tricks.com/persistent-headers/
This code works form me. Include the jquery.js file.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){
var contentDivId = "contentDiv";
var headerDivId = "headerDiv";
var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings');
/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/
fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
/*Start : Place header row cell and content table first row cell inside <DIV>*/
var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
for (k = 0; k < contentFirstRowCells.length; k++) {
$( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
}
var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
for (k = 0; k < headerFirstRowCells.length; k++) {
$( headerFirstRowCells[k] ).wrapInner( "<div></div>");
}
/*End : Place header row cell and content table first row cell inside <DIV>*/
/*Start : Fix width for columns of header cells and content first ror cells*/
var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
for (i = 0; i < contentColumns.length; i++) {
if (i == contentColumns.length - 1) {
contentCellWidth = contentColumns[i].offsetWidth;
}
else {
contentCellWidth = contentColumns[i].offsetWidth;
}
headerCellWidth = headerColumns[i].offsetWidth;
if(contentCellWidth>headerCellWidth){
$(headerColumns[i]).css('width', contentCellWidth+"px");
$(contentColumns[i]).css('width', contentCellWidth+"px");
}else{
$(headerColumns[i]).css('width', headerCellWidth+"px");
$(contentColumns[i]).css('width', headerCellWidth+"px");
}
}
/*End : Fix width for columns of header and columns of content table first row*/
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
}
function radioCount(){
alert(document.form.elements.length);
}
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
<td><div>Firstname</div></td>
<td><div>Lastname</div></td>
<td><div>Points</div></td>
</tr>
<tr>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr-->
<tr id="tableColumnHeadings" class="tableColumnHeadings">
<td> </td>
<td>Firstname</td>
<td>Lastname</td>
<td>Points</td>
</tr>
<tr style="height:0px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
<td>Jillsddddddddddddddddddddddddddd</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</form>
</body>
</html>
use StickyTableHeaders.js for this.
Header was transparent . so try to add this css .
thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
I know this question is old, but if anyone have this same issue, an easy way without having to write lots of CSS, just wrap your <table> with <div> and your <div> should have a style with overflow-y: auto; and some height.
As below example:
<div style="overflow-y: auto; height: 400px;">
<table>...</table>
</div>
Add a style to the thead as below:
thead {
position: sticky;
top: 0;z-index: 2;
}