When the horizontal scrollbar is to the left, the vertical scrollbar is not present
When the horizontal scrollbar is to the right, the scrollbar is present
How can I make the vertical scrollbar show at all times (it should only cover tbody)
Here's the Stackblitz
And here's the code anyway:
table thead,
table tbody {
display: block;
}
tbody {
height: 160px;
overflow: auto;
}
div {
width: 160px;
overflow: auto;
}
<div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>
Leave out overflow: auto; from tbody, and add position: sticky; to thead. Make sure to add a background-color to thead so the table's content doesn't overlap when scrolling.
table thead,
table tbody {
display: block;
}
thead {
position: sticky;
top: 0;
background: white;
}
tbody {
height: 160px;
/* overflow: auto; */
}
div {
width: 160px;
overflow: auto;
}
<div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>
Related
My goal is to create a table with certain conditions:
If display width is too small to fit contents, add horizontal scrollbar and do not shrink cells.
If display height is too small to fit contents, add vertical scrollbar and do not shrink cells.
I managed to achieve this, but I have a problem where if both display width and height are too small to fit contents, the vertical scrollbar is perfect, but horizontal scrollbar is hidden under the vertical overflow. So if a user would like to see the entire first row, he/she needs to scroll vertically to the end, then scroll horizontally to the end, and finally scroll vertically back up to see the first row.
Here is a JSFiddle example: https://jsfiddle.net/totsik/fr24Ldyb/7/
CSS and HTML:
.main-container {
background-color: #222C2A;
color: #F3EED9;
margin: 3rem 5%;
}
.container {
overflow-y: auto;
padding: 2rem;
min-height: 50vh;
max-height: 70vh;
border: 2px solid #222C2A;
}
table {
overflow-x: auto;
display: block;
border-collapse: collapse;
width: 100%;
}
tr.table-head-row th {
border-style: solid;
border-width: 2px 0;
border-color: #F3EED9;
}
tr td {
text-align: center;
}
tr td:first-child {
text-align: left;
}
th {
width: 100%;
background: #222C2A;
text-align: left;
padding: 1rem 2rem;
}
td {
font-size: 1rem;
padding: 0.75rem 1.5rem;
background-color: #F3EED9;
color: #222C2A;
}
<div class="main-container">
<div class="container">
<table>
<thead>
<tr class="table-head-row">
<th class="">header 1</th>
<th class="">header 2</th>
<th class="">header 3</th>
<th class="">header 4</th>
<th></th>
</tr>
</thead>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
</table>
</div>
</div>
What I would like to happen is that if both height and width are too small, the scrollbars will be both visible. How should I change my code to accomplish this?
UPDATE: updated jsfiddle. Also forgot to mention that I would like the to be vertical scrollbar on the container div not the table itself.
The fiddle example has a max-height in table which the text above does not.
Change the max-height in table
table {
overflow-x: auto;
display: block;
border-collapse: collapse;
width: 100%;
max-height: 50vh;
}
and both bars show
I am attempting to freeze the first two columns and last column of an HTML table that is using both horizontal and vertical scroll and haven't been successful. I don't have control of how the table html is output but it matches the way it is structured in the sample below (i.e. thead/tr/th tbody/tr/td. I tried using position absolute on the columns and data but it doesn't look right when scrolling.
I would like to know if it is possible to achieve this without the use of JavaScript.
table {
width: 500px;
height: 300px;
display: block;
overflow: auto;
white-space: nowrap;
}
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
<tr>
<td>Data value 1</td>
<td>Data value 2</td>
<td>Data value 3</td>
<td>Data value 4</td>
<td>Data value 5</td>
<td>Data value 6</td>
<td>Data value 7</td>
<td>Data value 8</td>
<td>Data value 9</td>
<td>Data value 10</td>
</tr>
</tbody>
</table>
Hope this helps, using jQuery and `css 2 colums are fixed (includes header as well)
https://jsfiddle.net/spsenthilrm/hadm9Lyw/
Note: The position left is kept on change when the user scrolls, so jQuery is required as well for this fixed 2 columns.
I have a table that contains a lot of rows (1000+). Structure is really simple, here is a simplified example with only one row.
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
I need column names to be fixed, so I made tbody scrollable. I added these CSS rules
tbody {
display: block;
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
}
Here is a full JSfiddle example
There are 2 problems.
<tbody> doesn't occupy all the width. I tried with width: 100%; but it doesn't work. display: block; seems to prevent normal width behaviour but I need it for the scroll. How can I do it occupy all the available space? It's fine even if only 1 column get all the remaining space
<thead> and <tbody> column width is different. At the moment I use a jQuery piece of code to set headers width like other rows, this is fine but I wonder if a better solution is possible.
add this to css
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed; /* even columns width , fix width of table too*/
}
This answer can help: it gives all the possible solutions, both pure css and with jquery.
This a working solution in pure css where also <tbody> and <thead> have the same width:
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
thead {
border: 1px solid grey;
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: 100%;
}
tbody {
max-height: 150px;
width: 100%;
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}
/* decorations */
.table-container {
border: 1px solid black;
padding: 0.3em;
}
table {
border: 1px solid lightgrey;
}
table td, table th {
padding: 0.3em;
border: 1px solid lightgrey;
}
table th {
border: 1px solid grey;
}
td{
word-wrap:break-word
}
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1akeuntveiuyrtiueyctiuyetiuyenaiuc</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value sifcaiuerycnpiuaerypintcer2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
EDIT - Alternative solution: If you remove display:block; from <tbody>, your code works.
tbody {
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%
}
Define to this css
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid grey;
width: 100%;
text-align: left;
}
thead {
border: 1px solid grey;
}
tbody > tr , thead > tr{display:table;width:100%;}
tbody, thead{display: block;}
tbody {
overflow-y: scroll;
overflow-x: none;
max-height: 150px;
border: 1px solid grey;
width: 100%
}
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
</tr>
</tbody>
</table>
Whenever I am trying to make my table scroll with overflow and display block css. Table width always getting reduced and leaves empty space. Why this is happening? What I am doing wrong here. My table is inside a div.
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
</div>
css:
div{
width:500px;
height:500px;
display:block;
}
table
{
width:180px;
height:100px;
display:block;
overflow:auto;
border:1px solid black;
}
table td{
border:1px solid black;}
}
Fiddle:
http://jsfiddle.net/KrP7v/117/
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
CSS
#tableContainer{
float:left;
height:100px;
display:block;
overflow-y: scroll;
float:left
}
table
{
height:100px;
display:block;
float:left;
}
table td{
border:1px solid black;}
}
http://jsfiddle.net/4erveak/KrP7v/118/
Here is fix for your bug but at end add a div and get them style clear:both
I have a table with fixed header but the header and the body are not aligned properly. The no.of columns is more than 25. If I remove "display:block", the header is not fixed.
Here is my Code
<table width="100%" style="font-size:13px" id="data" cellpadding="4" cellspacing="5" border="2" class="scrollTable">
<thead style="background:#e2e2e2" align="center" class="fixedHeader">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
<th>Header 21</th>
<th>Header 22</th>
<th>Header 23</th>
<th>Header 24</th>
<th>Header 25</th>
<th>Header 26</th>
<th>Header 27</th>
<th>Header 28</th>
<th>Header 29</th>
</tr>
</thead>
<tbody style="background:#f2f2f2;" align="center" class="scrollContent">
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
<td>Data 10</td>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 13</td>
<td>Data 14</td>
<td>Data 15</td>
<td>Data 16</td>
<td>Data 17</td>
<td>Data 18</td>
<td>Data 19</td>
<td>Data 20</td>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
<td>Data 24</td>
<td>Data 25</td>
<td>Data 26</td>
<td>Data 27</td>
<td>Data 28</td>
<td>Data 29</td>
</tr>
</tbody>
</table>
The corresponding css for this code is here
div.tableContainer {
clear: both;
height: 360px;
overflow: auto;
width: 1024px
}
/* define width of table. Add 16px to width for scrollbar. */
html>body div.tableContainer table {
width: 1024px
}
html>body thead.fixedHeader tr {
display: block
}
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}
thead.fixedHeader {
color: #000;
display: block;
text-decoration: none;
width: 100%;
}
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width:100%;
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th {
width: 60px
}
html>body thead.fixedHeader th + th {
width: 140px
}
html>body thead.fixedHeader th + th + th {
width: 360px
}
html>body tbody.scrollContent td {
width: 60px
}
html>body tbody.scrollContent td + td {
width: 140px
}
html>body tbody.scrollContent td + td + td {
width: 360px
}
I need the first 3 columns and header of the table to be fixed and rest of the columns scrollable. Help me out
I think I found your problem. Some of your CSS was disrupting the size of your content cells, and you needed to adjust for the size of the scrollbar by adding some padding-right: 17px; on the header row.
Here's a jsFiddle: http://jsfiddle.net/X6Ck5/
I've put your code on jsfiddle for better visibility: http://jsfiddle.net/
If I understand you correctly, you will have to work with at least two tables.
<table>
<tr class="fixed">
<th>column 1, row 1</th>
<th>column 1, row 2</th>
</tr>
<tr class="fixed">
<td>column 2, row 1</td>
<td>column 2, row 2</td>
</tr>
<tr class="fixed">
<td>column 3, row 1</td>
<td>column 3, row 2</td>
</tr>
<tr class="fixed">
<td>column 4, row 1</td>
<td>column 4, row 2</td>
</tr>
<tr>
<td colspan="2">
<table class="scrollable">
<tr>
[rest of what you would have put in your main table]
</tr>
</table>
</td>
</tr>
</table>
To make the header and the first three columns after the header sticky you will have to do the following two steps with javascript (e.g. with jquery):
duplicate everything that has the class "fixed" into a new DOM-element that looks exactly as the original content on the site
whenever the user scrolls check if the header starts to move out of screen, then make that previously made content visible and attach it to the top of the screen.
That might seem like a lot at first, but it's no magic. Here's additional resources to get you started:
Make something stick to the top of the page:
.element {position: fixed; top: 0;}
jquery clone() -> put content of your site into a new DOM-element
jquery scroll() -> check if the user scrolls and then act to it
Everything else, I am sure, you can find out! Good luck!