Develop Reference

How to Fix the TD elements of first column of the table body while the rows are scrolling?

The title is not clear, I know. Let me explain what I mean:
First column has td elements which have varying rowspans. What I want is to keep the td text in first column 'fixed' at the top while scrolling down.
But only as long as the rest of the td elements in the remaining columns are in scope.
Once all the rows (which the first column cell is spanning) is out of table view, the td element should scroll out of the view and the next td should now start fixing.
After Scrolling a bit:
And after All the animal rows are scrolled out, the fixed 'Animal' td would also go up and then 'Cars' would be fixed and then Hats would be fixed like this:

I got it working by setting
vertical-align: top; for the element
and created a div under the td element which contains the actual value for the cell
then applied position: sticky; top:0; z-index: 1; to the div.
Working fiddle: https://jsfiddle.net/ankitkraken/yw0jhzpu/1/
HTML:
<td class="td-class-name" rowspan="3">
<div class="level-1">
"Cars"
</div>
</td>
CSS:
.td-class-names{
vertical-align: top;
}
.level-1{
position: sticky ;
top: 80px;
z-index: -1;
}
I had to use top: 80px;, top:0; was putting the td contents BEHIND the sticky table header.

You can acheive this result with the sticky positioning:
thead tr:first-of-type {
position: sticky;
top: 0px;
z-index: 10;
}
thead tr:first-of-type th {
background: yellow;
}
th {
border: 1px solid;
padding: 6px;
}
td {
border: 1px solid;
padding: 6px;
}
th[rowspan]>.box {
vertical-align: top;
position: sticky;
top: 34px;
}
th[rowspan][data-order='first'] {
background: orange;
}
th[rowspan][data-order='second'] {
background: green;
}
th[rowspan][data-order='third'] {
background: indianred;
}
th[rowspan][data-order='fourth'] {
background: lightblue;
}
.main-container {
position: relative;
}
.table-container {
position: static;
max-height: 180px;
max-width: 350px;
;
overflow-y: scroll;
}
.fake {
width: 100%;
height: 100px;
}
<div class="main-container">
<div class='table-container'>
<table>
<thead>
<tr>
<th>CATEGORY</th>
<th>TYPE</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr>
<th data-order='first' rowspan='5'>
<div class='box'>Animals</div>
</th>
<td>Dog</td>
<td>Bob</td>
</tr>
<tr>
<td>Dog</td>
<td>Flash</td>
</tr>
<tr>
<td>Cat</td>
<td>Mimi</td>
</tr>
<tr>
<td>Dog</td>
<td>Casper</td>
</tr>
<tr>
<td>Horse</td>
<td>Wind Lady</td>
</tr>
<tr>
<th data-order='second' rowspan='5'>
<div class='box'>Cars</div>
</th>
<td>Chrysler</td>
<td>Ann</td>
</tr>
<tr>
<td>Dodge</td>
<td>Christine</td>
</tr>
<tr>
<td>Ford</td>
<td>Foo</td>
</tr>
<tr>
<td>Ferrari</td>
<td>Dandy</td>
</tr>
<tr>
<td>Mercedes</td>
<td>A200</td>
</tr>
<tr>
<th data-order='third' rowspan='5'>
<div class='box'>Food</div>
</th>
<td>Apple</td>
<td>George</td>
</tr>
<tr>
<td>Banana</td>
<td>Rocco</td>
</tr>
<tr>
<td>Strawberry</td>
<td>Liza</td>
</tr>
<tr>
<td>Ananas</td>
<td>Ted</td>
</tr>
<tr>
<td>Avocado</td>
<td>Gary</td>
</tr>
<tr>
<th data-order='fourth' rowspan='5'>
<div class='box'>Phones</div>
</th>
<td>Iphone XXI</td>
<td>ObiWan</td>
</tr>
<tr>
<td>Nokia 8110</td>
<td>Neo</td>
</tr>
<tr>
<td>Ericsson</td>
<td>Dr. Who</td>
</tr>
<tr>
<td>Huawei Mate 40</td>
<td>Dead or Alive</td>
</tr>
<tr>
<td>Xiaomi</td>
<td>Ping</td>
</tr>
</tbody>
</table>
<div class='fake'>
</div>
</div>
</div>
Sticky positioning is not always straightforward, expecially when dealing with overflow properties and display: table. Here are some useful resources about these topics:
Position: stuck; — and a way to fix it
CSS Position Sticky - How It Really Works!
Creating sliding effects using sticky positioning
Position Sticky on <td> with colspan?

HTML Table that will change

I am having trouble with replicating this.
Im trying to make a table that changes based on the window size. When the window is large I want the table to look like the "large screen" graphic, and when the window is small I want the table to look like the "small screen" graphic.
[![enter image description here][1]][1]
What I have right now is this. When the window is large I have the desired layout.
[![enter image description here][2]][2]
When I make the preview window smaller, my table collapses into one column instead of looking like how I want it to look like. IT should loook like the "small screen" graphic on the screenshot above.
[![enter image description here][3]][3]

Make use of display: block for you media query display.
The default display value of table will be display: table; thead will be display: table-header-group;, tbody will be display: table-row-group;, tr will be display: table-row;, th and td will be display: table-cell;.
For the table header and body contents to fold in multiple lines, you have to make use of display: block, float: left, box-sizing: border-box;
To update the content of the header, you should do a tweek. Move the label COMPARISON to as span. On the smaller resolution, make the sapn hidden and add the content to after pseudo element.
.table-container {
display: block;
margin: 1em auto;
width: 100%;
max-width: 600px;
border-collapse: collapse;
}
.flag-icon {
margin-right: 0.1em;
}
.flex-row {
width: 20%;
border: 1px solid palevioletred;
}
.flex-row,
.flex-cell {
text-align: center;
}
#media only screen and (max-width: 600px) {
.table-container {
display: block;
}
th,
td {
width: auto;
display: block;
}
.flex-row {
width: 25%;
float: left;
box-sizing: border-box;
}
.flex-row.first {
width: 100%;
text-align: left;
}
thead,
thead tr,
tbody,
tbody tr {
display: block;
}
.header .flex-row.first span {
display: none;
}
.header .flex-row.first:after {
content: 'HOW THE PLAYERS COMPARE';
}
}
<table class="table-container" width="100%" role="table" aria-label="Destinations">
<thead>
<tr class="flex-table header" role="rowgroup">
<th class="flex-row first" role="columnheader">
<span>COMPARISON</span>
</th>
<th class="flex-row" role="columnheader">player 1</th>
<th class="flex-row" role="columnheader">player 2</th>
<th class="flex-row" role="columnheader">player 3</th>
<th class="flex-row" role="columnheader">player 4</th>
</tr>
</thead>
<tbody>
<tr class="flex-table row" role="rowgroup">
<td class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span>Speed</td>
<td class="flex-row" role="cell">11Sp </td>
<td class="flex-row" role="cell">22Sp</td>
<td class="flex-row" role="cell">33Sp</td>
<td class="flex-row" role="cell">44Sp</td>
</tr>
<tr class="flex-table row" role="rowgroup">
<td class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span>Endurance</td>
<td class="flex-row" role="cell">11E </td>
<td class="flex-row" role="cell">22E</td>
<td class="flex-row" role="cell">33E</td>
<td class="flex-row" role="cell">44E</td>
</tr>
<tr class="flex-table row" role="rowgroup">
<td class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span>Strength</td>
<td class="flex-row" role="cell">11St </td>
<td class="flex-row" role="cell">22S</td>
<td class="flex-row" role="cell">33S</td>
<td class="flex-row" role="cell">44S</td>
</tr>
</tbody>
</table>

Freeze first row and first column of table

I am trying to freeze/lock the first row and the first column of a table.
I have tried giving thead position: absolute; or position: fixed; but it looks strange.
I have followed some answers but I am still confused how to make it.
My HTML / CSS Code :
th {
font-size: 80%;
text-align: center;
}
td {
font-size : 65%;
white-space: pre;
text-align: center;
}
.inner {
overflow-x: scroll;
overflow-y: scroll;
width: 300px;
height: 100px;
}
input {
font-size : 65%;
}
<body>
<div class="inner">
<form method="POST" action="dashboard">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
</form>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
</div>
</body>

Freeze First Row
Freezing the first row can be done with CSS by setting the table body to overflow: auto, and giving a fixed width to the table cells. (See example 1)
Freeze First Row & First Column
However, to get this behavior for both first row and first column, you need to separate the first row, first column, and first cell from the table, and then continuously set the position of these elements based on the scrolled position of the table body, upon a scroll event. (See example 2)
Example 1: (Freeze first row only)
table thead tr {
display: block;
}
table th, table td {
width: 80px;
}
table tbody {
display: block;
height: 90px;
overflow: auto;
}
th {
text-align: center;
}
td {
text-align: center;
white-space: pre;
}
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
Example 2: (Freeze first row and first column)
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
});
});
body {
margin: 0;
}
th, td {
text-align: center;
background-color: white
}
table {
position: relative;
width: 400px;
overflow: hidden;
}
thead {
position: relative;
display: block;
width: 400px;
overflow: visible;
}
thead th {
min-width: 80px;
height: 40px;
}
thead th:nth-child(1) {
position: relative;
display: block;
height: 40px;
padding-top: 20px;
}
tbody {
position: relative;
display: block;
width: 400px;
height: 90px;
overflow: scroll;
}
tbody td {
min-width: 80px;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
<td>5</td>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>

If anyone struggles with such problem here is a solution for modern browsers without using jQuery or even JS - just pure HTML and CSS.
The trick is to set table to relative position and first row and/or column cells to sticky position. I added explicitly background color and z-index values to have this overlapping feeling.
.wrapper {
overflow: auto;
height: 100px;
width: 200px;
}
table {
position: relative;
border-collapse: separate;
border-spacing: 0;
}
table th,
table td {
width: 50px;
padding: 5px;
background-color: white;
}
table tbody {
height: 90px;
}
table th {
text-align: center;
position: sticky;
top: 0;
z-index: 2;
}
table th:nth-child(1) {
left: 0;
z-index: 3;
}
table td {
text-align: center;
white-space: pre;
}
table tbody tr td:nth-child(1) {
position: sticky;
left: 0;
z-index: 1;
}
<div class="wrapper">
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>2</td>
<td>Ann</td>
<td>25</td>
<td>Great Britain</td>
</tr>
<tr>
<td>3</td>
<td>Alexander</td>
<td>41</td>
<td>Spain</td>
</tr>
<tr>
<td>4</td>
<td>Wasilij</td>
<td>63</td>
<td>Ukraine</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
</tbody>
</table>
</div>

I resoved this issue from myself with my colleague together yesterday. The adapted CSS is:
.pcvBody {
overflow-x: auto;
width: calc(100vw - 110px);
}
/* CSS START for freezing table column*/
#prodTable {
position: relative;
overflow: hidden;
}
#prodTable thead {
position: relative;
display: block;
overflow: visible;
}
#prodTable thead th {
min-width: 150px;
width: 1000px;
}
#prodTable thead th:nth-child(1), #prodTable thead th:nth-child(2) {
position: relative;
/*display: block;*/
max-width: 150px;
width: 50px;
border-left: 1px solid #ededed;
}
#prodTable tbody {
position: relative;
display: block;
}
#prodTable tbody td {
min-width: 150px;
width: 1000px;
}
#prodTable tbody input {
max-width: 120px;
}
#prodTable tbody tr td:nth-child(1), #prodTable tbody tr td:nth-child(2) {
position: relative;
/*display: block;*/
background-color: white;
min-height: 20px;
max-width: 150px;
width: 50px;
border-left: 1px solid #ededed;
}
/* CSS END for freezing table column*/
And the adjusted scroll event is:
$('#pcvBody').scroll(function(e) {
var scrollLeft = $("#pcvBody").scrollLeft();
//$('#prodTable thead').css("left", -tbodyScrollLeft);
//$('#prodTable thead th:nth-child(1)').css("left", tbodyScrollLeft - 5);
//$('#prodTable tbody td:nth-child(1)').css("left", tbodyScrollLeft - 5);
$('#prodTable thead th:nth-child(1)').css("left", scrollLeft);
$('#prodTable tbody td:nth-child(1)').css("left", scrollLeft);
$('#prodTable thead th:nth-child(2)').css("left", scrollLeft);
$('#prodTable tbody td:nth-child(2)').css("left", scrollLeft);
});
And in addition, I added a 'div' to wrap the table.

How to set html table height and column widths?

I am attempting to control the height of a table body so that a scrollbar appears when more data than fits in a view is displayed, thead must stay visible. At the same time I'm trying to control the width of the table columns.
The table height can be controlled by setting 'display: block' in the table body css. The table body will now be limited by the container height or any height the table body is set to. This messes up the column widths though.
The column widths can be assured by setting as desired. As long as the tbody isn't set to 'display: block' the columns display properly but the tbody is out of control and ignores any height you may have set.
I'm trying to do this to make it possible for the result to be easily chapter 508 compliant for screen reader technology for those with disabilities. AT this point, I'm planning to convert to jquery.dataTables which puts a view port over top of a table so I can keep the 508 compliance and get the functionality I need. This seems way over the top for what I'm wanting to accomplish but I can't find a simple way to do it with a native table and basic css.
Test code is as follows:
<div id="div1">
<table>
<colgroup>
<col id='col-1'>
<col id='col-2'>
</colgroup>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February is a long month that seems like it could go on forever!</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$180</td>
</tr>
<tr>
<td>April</td>
<td>$86</td>
</tr>
<tr>
<td>May</td>
<td>$98</td>
</tr>
<tr>
<td>June</td>
<td>$29</td>
</tr>
<tr>
<td>July</td>
<td>$44</td>
</tr>
<tr>
<td>August</td>
<td>$244</td>
</tr>
</tbody>
</table>
#div1 {
height: 100px;
width: 400px;
padding: .5px;
border: 1px solid red;
}
colgroup {
width: 100%;
}
#col-1 {
width:70%;
}
#col-2 {
width:30%;
}
table {
width: 100%;
table-layout: auto;
}
thead {
background-color: #B2DFFF;
}
tbody {
height: 72px;
overflow-y: scroll;
background-color: #F0F0F0;
/* display:block; This will set column width correctly but it messes up tbody height */
display:block; /* This will allow height to be set but it messes up columns width */
}
Does anyone have any ideas?

Add overflow: auto to your container div's css.
Link to JSFiddle: http://jsfiddle.net/bmarple/NK378/10/

It is possible, just have some considerations:
thead {display: table; width: 100%;}
tbody {display: block; overflow: auto;}
tbody tr {display: table; width: 100%;}
td, th {/* should set a width for each td, th*/}
This is the example: http://jsfiddle.net/NK378/14/

Add overflow:scroll; to #div1 to add scroll beyond a height of 100px.
http://jsfiddle.net/NK378/13/
EDIT:
I could not see from your question that you wanted the header in view at all times. To do this, aply the style to the tbody so it doesn't apply to the header.. So the tbody tag has an id of "scroll", and the css for #scroll is:
#scroll {
display:block;
overflow-y: scroll;
display: block;
height: 20px;
width:400px;
}
http://jsfiddle.net/NK378/17/

Try to change the "display" property to "inline-block" and "max-width", "min-width", "overflow-x", "white-space" like that:
CSS
tbody td {
display: inline-block;
max-width: 100px;
min-width: 100px;
overflow-x: scroll;
white-space: nowrap;
}
JSFIDDLE
Watch the second line in the table.
In the case you want to limit the height of your td:
CSS
tbody td {
display: inline-block;
max-width: 100px;
min-width: 100px;
overflow-y: scroll;
max-height: 30px;
min-height: 30px;
overflow-x: hidden;
}
JSFIDDLE

You shouldn't use display: block on tables. They need their default display: table in order to function correctly.
You can just set the containing div to scroll when it overflows:
#div1 {
height: 100px;
width: 400px;
padding: .5px;
border: 1px solid red;
overflow-y: scroll; /* Added */
}
Demo
UPDATE
I completely missed the requirement for the thead to not scroll. One way to achieve this is to nest another table inside the first to separate it from the thead. You are allowed to place a <div> inside a <td> so that's how you create the scroll.
<div id="div1">
<table>
<thead>
<tr>
<th>Month</th>
<th class="savings">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<div class="table-body">
<table>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February is a long month that seems like it could go on forever!</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$180</td>
</tr>
<tr>
<td>April</td>
<td>$86</td>
</tr>
<tr>
<td>May</td>
<td>$98</td>
</tr>
<tr>
<td>June</td>
<td>$29</td>
</tr>
<tr>
<td>July</td>
<td>$44</td>
</tr>
<tr>
<td>August</td>
<td>$244</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Some additional styles
th:first-child, td:first-child {
width: 80%;
}
table table td {
padding: 4px 5px;
}
.table-body {
height: 100px;
overflow: auto;
}
UPDATED DEMO

HTML Fixed header - Align position th at the same level as td

I've created a table with fixed header and scrolling. It works really well, but the table header alignment doesn't match the table data. I mean, the result should be
--------------------
Id Heading2 Heading3
--------------------
1 value1 value2
2 value1 value2
3 value1 value2
But in my table the headers doesn't match the table data which mean the headers are not aligned properly. Here is my Fiddle. I've tried padding. But it didn't work. So, please help how to align the headers to match corresponding column? JQuery and Javascript solution is also acceptable.

Try this css:
thead >tr,th
{
border:none;
padding:5px 20px 5px 10px;
text-align: center;
background-color:#0B3B17;
font-size:12pt;
}
td
{
border:none;
color:#61210B;
text-align: center;
padding: 3px 5px;
}
table
{
display: block ;
height: 100px;
overflow-y: scroll;
width:400px;
background-color: #ddd;
}

Try this one:
html:
<table>
<thead>
<tr>
<th class="id">Id</th>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">1</td>
<td class="name">Raja</td>
<td class="position">developer</td>
</tr>
<tr>
<td class="id">2</td>
<td class="name">Rajesh</td>
<td class="position">associate consultant</td>
</tr>
<tr>
<td class="id">2</td>
<td class="name">Rajesh</td>
<td class="position">associate consultant</td>
</tr>
<tr>
<td class="id">2</td>
<td class="name">Rajesh</td>
<td class="position">associate consultant</td>
</tr>
<tr>
<td class="id">2</td>
<td class="name">Rajesh</td>
<td class="position">associate consultant</td>
</tr>
</tbody>
</table>
css:
thead tr th
{
color:red;
text-align:center;
width:100px;
}
tbody
{
position: absolute;
height: 100px;
overflow: scroll;
background-color:red;
}
tbody tr td
{
width:100px;
}
.id
{
text-align:right;
}
.name, .position
{
text-align:center;
}