My table thead have 2 tr with diferents colspan and rowspan like this following picture:
<table id="header-fixed">
<thead>
<tr id="tr1" role="row" style="background-color: rgb(204, 9, 47);">
<th rowspan="2" colspan="1">Unidade</th>
<th rowspan="1" colspan="1">Orçado</th>
<th rowspan="1" colspan="1">Realizado</th>
<th rowspan="1" colspan="3">Atingimento no Resultado - Variação</th>
</tr>
<tr id="tr2" role="row" style="background-color: rgb(204, 9, 47);">
<th rowspan="1" colspan="1">Resultado</th>
<th rowspan="1" colspan="1">Resultado</th>
<th rowspan="1" colspan="1">Variação</th>
<th rowspan="1" colspan="1">%</th>
<th rowspan="1" colspan="1">Ating.</th>
</tr>
</thead>
...
</table>
I need fix the header of this table when scrolling, so, i found this code:
https://stackoverflow.com/a/4709775/8032896
This code almost work, when I scroll, the header is fixed, but column width is misfit like this picture.
Can someone help me?
try this example
td {
border-bottom: 1px solid #ccc;
padding: 5px;
text-align: left; /* IE */
}
td + td {
border-left: 1px solid #ccc;
}
th {
padding: 0 5px;
text-align: left; /* IE */
}
.header-background {
border-bottom: 1px solid black;
}
/* above this is decorative, not part of the test */
.fixed-table-container {
width: 50%;
height: 200px;
border: 1px solid black;
margin: 10px auto;
background-color: white;
/* above is decorative or flexible */
position: relative; /* could be absolute or relative */
padding-top: 30px; /* height of header */
}
.fixed-table-container-inner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
.header-background {
background-color: #D5ECFF;
height: 30px; /* height of header */
position: absolute;
top: 0;
right: 0;
left: 0;
}
table {
background-color: white;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.th-inner {
position: absolute;
top: 0;
line-height: 30px; /* height of header */
text-align: left;
border-left: 1px solid black;
padding-left: 5px;
margin-left: -5px;
}
.first .th-inner {
border-left: none;
padding-left: 6px;
}
/* for complex headers */
.complex.fixed-table-container {
padding-top: 60px; /* height of header */
overflow-x: hidden; /* for border */
}
.complex .header-background {
height: 60px;
}
.complex-top .th-inner {
border-bottom: 1px solid black;
width: 100%
}
.complex-bottom .th-inner {
top: 30px;
width: 100%
}
.complex-top .third .th-inner { /* double row cell */
height: 60px;
border-bottom: none;
background-color: #D5ECFF;
}
<div class="fixed-table-container complex">
<div class="header-background"> </div>
<div class="fixed-table-container-inner">
<table cellspacing="0">
<thead>
<tr class="complex-top">
<th class="first" colspan="2">
<div class="th-inner">First and Second</div>
</th>
<th class="third" rowspan="2">
<div class="th-inner">Third</div>
</th>
</tr>
<tr class="complex-bottom">
<th class="first">
<div class="th-inner">First</div>
</th>
<th class="second">
<div class="th-inner">Second</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>First</td>
<td>First</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>Last</td>
<td>Last</td>
<td>Last</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I have a searchable table using HTML, CSS and JavaScript - the JavaScript hides the contents of the table, except for the headers and then populates when details are entered into the search bar e.g. 1001, 1002, 1003. However, I'm also now wanting to add a simple separate table on the same page, but the JavaScript seems to hide this table completely as well.
Is there something I can add to the JavaScript to bypass the second table or are there other ways to do this? I'm a complete novice at this, so apologies if things aren't on point as I've had to research a lot of the JavaScript to fit what I was after.
First table
window.onload = function() {
var rows = document.querySelectorAll('tr:not(.active-row)');
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = 'none';
}
}
function ContactsearchFX() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("compliance-table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = 'none';
}
}
}
var rows = document.querySelectorAll('tr:not(.active-row)');
if (input.value.length == 0) {
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = 'none';
}
}
}
var allTableCells = document.getElementsByTagName("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
var node = allTableCells[i];
var currentText = node.childNodes[0].nodeValue;
}
#myInput {
width: 25%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: thin solid #ddd;
margin-bottom: 12px;
}
#compliance-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.6em;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
#compliance-table th,
#compliance-table td {
padding: 12px 15px;
border-left: thin solid #dddddd;
border-right: thin solid #dddddd;
text-align: center;
}
#compliance-table tbody tr {
border-bottom: thin solid #dddddd;
}
#compliance-table tbody tr.active-row {
font-weight: bold;
color: #0087AE;
}
<input type="text" id="myInput" onkeyup="ContactsearchFX()" placeholder="Search...">
<table id="compliance-table">
<thead>
<tr class="active-row">
<th colspan="3" style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">Details</th>
<th colspan="3" style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">Total No</th>
<th colspan="3" style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">w/e 10th Sep</th>
<th colspan="3" style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">w/e 17th Sep</th>
<th colspan="3" style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">w/e 1st Oct </th>
<th colspan="3" style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">w/e 22nd Oct </th>
<th colspan="3" style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">w/e 5th Nov</th>
<th colspan="3" style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">w/e 19th Nov</th>
</tr>
</thead>
<tbody>
<tr class="active-row">
<th style="text-align: center; vertical-align: middle;">Test 1</th>
<th style="text-align: center; vertical-align: middle;">Test 2</th>
<th style="text-align: center; vertical-align: middle;">Test 3</th>
<th style="text-align: center; vertical-align: middle;">QIVe</th>
<th style="text-align: center; vertical-align: middle;">QIVc</th>
<th style="text-align: center; vertical-align: middle;">aQIV</th>
<th style="text-align: center; vertical-align: middle;">QIVe</th>
<th style="text-align: center; vertical-align: middle;">QIVc</th>
<th style="text-align: center; vertical-align: middle;">aQIV</th>
<th style="text-align: center; vertical-align: middle;">QIVe</th>
<th style="text-align: center; vertical-align: middle;">QIVc</th>
<th style="text-align: center; vertical-align: middle;">aQIV</th>
<th style="text-align: center; vertical-align: middle;">QIVe</th>
<th style="text-align: center; vertical-align: middle;">QIVc</th>
<th style="text-align: center; vertical-align: middle;">aQIV</th>
<th style="text-align: center; vertical-align: middle;">QIVe</th>
<th style="text-align: center; vertical-align: middle;">QIVc</th>
<th style="text-align: center; vertical-align: middle;">aQIV</th>
<th style="text-align: center; vertical-align: middle;">QIVe</th>
<th style="text-align: center; vertical-align: middle;">QIVc</th>
<th style="text-align: center; vertical-align: middle;">aQIV</th>
<th style="text-align: center; vertical-align: middle;">QIVe</th>
<th style="text-align: center; vertical-align: middle;">QIVc</th>
<th style="text-align: center; vertical-align: middle;">aQIV</th>
</tr>
<tr>
<td>2</td>
<td>1001</td>
<td>Test 1001</td>
<td>46</td>
<td>60</td>
<td>83</td>
<td>12</td>
<td>35</td>
<td>42</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>22</td>
<td>42</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>23</td>
<td>0</td>
<td>0</td>
<td>7</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>1002</td>
<td>Test 1002</td>
<td>46</td>
<td>60</td>
<td>83</td>
<td>12</td>
<td>35</td>
<td>42</td>
<td>5</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>22</td>
<td>42</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>23</td>
<td>0</td>
<td>0</td>
<td>7</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>1003</td>
<td>Test 1003</td>
<td>31</td>
<td>20</td>
<td>31</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>7</td>
<td>16</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>15</td>
<td>0</td>
<td>0</td>
<td>5</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
Second table
<!DOCTYPE html>
<html>
<head>
<style>
#flu-table {
border-collapse: collapse;
width: 70%;
position: fixed;
}
#flu-table td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<h2>Key</h2>
<table id="flu-table">
<tr>
<th>Type</th>
<th>Applicable to</th>
</tr>
<tr>
<td>QIVe</td>
<td>Under 65 ONLY</td>
</tr>
<tr>
<td>QIVc</td>
<td>Under 65 - <em>can be used for over 65 if aQIV is not available</em></td>
</tr>
<tr>
<td>aQIV</td>
<td>Over 65 ONLY</td>
</tr>
</table>
</body>
</html>
I made a simple table with an overflow-x:auto; feature:
table {
border-collapse: collapse;
width: 150%;
}
td,
th {
border: 1px solid #AAA;
text-align: center;
padding: 3px;
}
<div style="overflow-x:auto;">
<table>
<thead>
<tr>
<th>d</th>
<th>c</th>
<th>b</th>
<th>a</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
How can I use the direction: rtl; element to make it scroll from right to left when the screen is small?
You can use the direction:rtl on the parent. Also, you don't need to manually do the RTL in code. Check edited table.
<div style="overflow-x:auto; width: 600px; direction: rtl;">
<table style="width: 700px;">
<style>
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #AAA;
text-align: center;
padding: 3px;
}
</style>
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
You can try this CSS Media query:
<style>
/* When max width of the screen is 768px */
#media only screen and (max-width: 768px) {
div {
overflow: scroll;
direction: rtl;
}
}
</style>
I have a table with first column fixed so when the next column is scrolled first column item will always display, Now the problem is first column width have fixed value and the same is applying on the margin left, How can we make fluid width instead of fixed width so it resizes based on the column?
.table-main {
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.table-main thead th {
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table-main tbody td {
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table {
position: relative;
}
.table-scroll {
margin-left: 131px; /*HOW TO HAVE THIS in Eqaul SIZE??*/
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 500px;
}
.table-main .fix-col {
border-left: solid 1px rgb(75, 90, 102);
border-right: solid 1px rgb(75, 90, 102);
left: 0;
position: absolute;
top: auto;
width: 110px; /*HOW TO HAVE THIS in Eqaul SIZE??*/
}
<div class="table">
<div class="table-scroll">
<table class="table-main">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
</tbody>
</table>
</div>
</div>
What about using javascript to calculate and set the width of the fixed column(.fix-col) and the margin-left of the container div(.table-scroll)?
var columns = document.querySelectorAll('.fix-col');
var maxWidth = 0;
/* Loop through columns to get the widest one */
for (var i = 0; i < columns.length; i++) {
/* Get only the width, without any paddings */
var w = parseFloat(window.getComputedStyle(columns[i]).getPropertyValue('width'));
if (w > maxWidth) {
maxWidth = w;
}
}
/* Second loop to set the width */
for (var i = 0; i < columns.length; i++) {
columns[i].style.width = maxWidth + 'px';
}
/* And finally update the margin of the wrapping div */
var paddingPlusBorder = 21;
document.querySelector('.table-scroll').style.marginLeft = maxWidth + paddingPlusBorder + 'px';
.table-main {
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.table-main thead th {
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table-main tbody td {
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table {
position: relative;
}
.table-scroll {
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 500px;
}
.table-main .fix-col {
border-left: solid 1px rgb(75, 90, 102);
border-right: solid 1px rgb(75, 90, 102);
left: 0;
position: absolute;
top: auto;
}
<div class="table">
<div class="table-scroll">
<table class="table-main" id="my-table">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Some very long name</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">LooooooooooongNameeee</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
</tbody>
</table>
</div>
</div>
And if you want to support older IE versions you can use a custom function to get the column widths instead of using window.getComputedStyle(columns[i]).getPropertyValue('width').
function getWidth(element) {
if (getComputedStyle in window) {
return window.getComputedStyle(element).getPropertyValue('width');
}
if (currentStyle in element) {
return element.currentStyle.width;
}
var defaultWidthIfNoSupport = '100px';
return defaultWidthIfNoSupport;
}
You could use position: sticky Sticky Element in order to anchor to left the fixed column:
.fix-col {
position: sticky;
position: -webkit-sticky;
background-color: white; // <-- By default it's transparent
}
<table>
<tr>
<th class="fix-col">Name</th>
see the code applied to your snippet:
.table-main {
border: none;
border-right: solid 1px rgb(75, 90, 102);
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.table-main thead th {
background-color: rgb(203, 220, 233);
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table-main tbody td {
border-bottom: solid 1px rgb(75, 90, 102);
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table-scroll {
overflow-x: scroll;
width: 500px;
}
.fix-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
left: 0;
margin-left: 1em;
}
<div class="table">
<div class="table-scroll">
<table class="table-main">
<thead>
<tr>
<th class="fix-col">Name</th>
<th>Designation</th>
<th>Experience</th>
<th>Technology</th>
<th>Company</th>
<th>Location</th>
<th>Contact No.</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fix-col">Bob</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">John</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Alessandro</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Joseph</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
<tr>
<td class="fix-col">Mark</td>
<td>Front End Developer</td>
<td>5 yrs</td>
<td>HTML,CSS</td>
<td>Google</td>
<td>California</td>
<td>9876543210</td>
<td>Google Office</td>
</tr>
</tbody>
</table>
</div>
</div>
I want to ask, I have code like the following:
// requires jquery library
jQuery(document).ready(function() {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
.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;
left: 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col"> </th>
<th class="fixed-side">Left Column</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">Test</th>
<th class="fixed-side">Left Column</th>
<td>Cell content<br> test
</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
my problem is when the table that i created i scroll the alert function that i made can not be on tap / doesnt work. what I want to do is when I press the test link the alert that I create can work
Can anyone give me a solution what should I change so that the code I create works?
You are cloning element using the clone class where there is pointer-events:none which prevent you from clicking, so simply remove it and it will work.
Read more about pointer-events
// requires jquery library
jQuery(document).ready(function() {
jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
.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;
left: 0;
}
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col"> </th>
<th class="fixed-side">Left Column</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">Test</th>
<th class="fixed-side">Left Column</th>
<td>Cell content<br> test
</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th class="fixed-side">Left Column</th>
<th class="fixed-side">Left Column</th>
<td>Cell content</td>
<td>Cell content longer</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
In CSS you have class:
.clone {
position:absolute;
top:0;
left:0;
pointer-events:none;
}
Property
pointer-events:none;
disable mouse click event.
Delete this property and alert will work.
<!DOCTYPE html>
<html>
<link href="../../../CSS/StatePage.css" rel="stylesheet" type="text/css">
<script src="sorttable.js"></script>
<header>
<h1>
<img src="../../logo.jpg" alt="logo" width="30" height="30"/>Title</h1>
<h6>small header</h6>
</header>
<br> <br>
<br> <br>
<br>
<div>
<table id="states"
align="center"
class="sortable"
>
<thead>
<tr>
<th><h4>Table title 1</h4></th>
<th><h4>Table title 2</h4></th>
<th><h4>Table title 3</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Date</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Date</td>
</tr>
</tbody>
</table>
</div>
<footer>
<h2> Footer Name </h2>
</footer>
</html>
/////// Here is my CSS
h1, h2, h6 {
font-family: Helvetica;
text-align: center;
}
header {
background-color: #FFFFFF;
position: fixed;
width: 100%;
top: 0px;
border-bottom: solid;
height: 99px;
}
tr, td {
padding: 5px;
}
table {
margin-top: 5px;
}
/* Sortable tables */
table.sortable thead {
background-color: #eee;
color: #E5855F;
cursor: default;
}
tr:nth-child(even) {
background-color: #FFC792;
}
thead {
font-family: Helvetica;
text-align: left;
}
tbody {
overflow: auto;
}
a:link {
color: black;
}
footer {
background-color: #FFFFFF;
position: fixed;
width: 100%;
top: auto;
bottom: 0px;
border-top: solid;
}
If you set the display properties of thead and tbody to "inline-block" you get scrolling. May not be exactly what you need but you'll have to tweek it.
Also you have to wrap the table in a container div so the elements don't "fall out"
thead {
width: 290px;
display: inline-block;
}
tbody {
width: 290px;
display: inline-block;
height: 70px;
overflow-y: scroll;
}
table {
margin-top: 5px;
}
tbody {
overflow-y: scroll;
}
#table-cont {
width: 290px;
}
https://jsfiddle.net/m12x44mo/1/