Fixed Left Column in table - javascript

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.

Related

how can i make the table responsive with fixed header? Means it scrolls when it reaches maximum viewpoint and also header fixed at its point

How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>

I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}

set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

How to make a table to scroll from right to left

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>

How to fix table thead and scrollable tbody(thead contain 3 row)

I have the following problem: My table have big thead (3 row). I wanna fix thead and tbody scrolling. I use jquery
but when I scrolling down, borders thead disappear.
$(document).ready(function() {
document.querySelector(".tableContainer").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
this.querySelector("thead").style.transform = translate;
});
});
.TableData {
border-collapse: collapse;
font-family: "Arial Narrow", "Franklin Gothic Medium", "Arial";
font-size: 1.05em;
width: 100%;
height: 60vh;
overflow-x: hidden;
.TableData td,
.TableData th {
border: 1px solid black;
padding: 2px;
}
.TableData>thead>tr>th {
border: 1px solid black;
padding: 2px;
background: #d9edf7;
vertical-align: middle;
text-align: center;
}
.TableData thead>tr {
border: 1px solid black;
}
.TableData>tbody>tr>th {
border: 1px solid black;
padding: 2px;
}
.TableData>tbody>tr.tr1 {
background: #eee;
font-weight: 600;
}
.TableData>tbody>tr.tr1>td {
vertical-align: middle;
text-align: center;
}
.TableData>tbody>tr.tr2 {
background: #d9edf7;
font-weight: 600;
}
.TableData>tbody>tr.tr2>td {
vertical-align: middle;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tableContainer" style="overflow-x:hidden;height:500px;">
<table class="TableData">
<thead>
<tr>
<th rowspan="3">some text</th>
<th rowspan="3">some text</th>
<th>some text</th>
<th colspan="6">some text</th>
<th colspan="4">some text</th>
<th colspan="10">some text some text</th>
<th colspan="3">some text</th>
<th rowspan="3">some text</th>
</tr>
<tr>
<th rowspan="2">%</th>
<th rowspan="2">№ </th>
<th rowspan="2">Вх-%</th>
<th colspan="3">some text</th>
<th rowspan="2">some text</th>
<th colspan="2">1</th>
<th colspan="2">2</th>
<th rowspan="2">Вх-%</th>
<th colspan="3">NTU</th>
<th rowspan="2">ΔNTU T2-T1</th>
<th rowspan="2">Кt,some text</th>
<th colspan="4">some text</th>
<th rowspan="2">some text</th>
<th rowspan="2">% some text</th>
<th rowspan="2">NTU</th>
</tr>
<tr>
<th>Т0</th>
<th>Т1</th>
<th>Т2</th>
<th>Вх-%</th>
<th>NTU</th>
<th>Вх-%</th>
<th>NTU</th>
<th>Т0</th>
<th>Т1</th>
<th>Т2</th>
<th>А420</th>
<th>Т420</th>
<th>А440</th>
<th>Т440</th>
</tr>
</thead>
</table>
</div>
P.S I try more combination, with css, js. good solution with this jquery, but something wrong. Somebody help me fix this problem.
https://jsfiddle.net/testuser1234/w1sb26y3/?

You will have to fix the height of tbody and then set overflow-y such that it allows scroll.
You can try something like this (taken from this post-- How can I let a table's body scroll but keep its head fixed in place?)
.TableData thead {
display: table;
table-layout:fixed;
width: 100%;
}
.TableData tbody {
display: block;
height: 10em; //CHANGE THIS ACCORDING TO NEED
overflow-y: scroll;
}
.TableData tbody tr {
display: table;
table-layout:fixed;
width: 100%;
}
.TableData th, .TableData td {
width: auto;
border: 1px solid;
}

how i can fix a table header when scroll

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>

I need a fixed table header with a scrollable body. I have tried everything but it won't seem to 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/

Categories