Scrollable table with fixed column fixed with equal size - javascript

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>

Related

CSS on hover effect on a <td> does not wok properly

I would like to make a dropdown list within every td of a table, something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
.btncritical {
background-color: #fc0303;
color: black;
padding: 16px;
font-size: 16px;
border: none;
border: 2px solid #ccc;
}
.btnheigh {
background-color: #fc7703;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">+ operator:0.20.1</button>
<button class="btncritical">critical: 2</button>
<button class="btnheigh">heigh: 1</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</div> <br>
<div class="dropdown">
<button class="dropbtn">+ operator:0.20.1</button>
<button class="btncritical">critical: 2</button>
<button class="btnheigh">heigh: 1</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Which works perfectly. However, because I will generate the content automatically (the first cell) I would like the dropbtn buttons to have constant width. I thought I could put it in another table, however, it seems that hovering stopped working:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
.btncritical {
background-color: #fc0303;
color: black;
padding: 16px;
font-size: 16px;
border: none;
border: 2px solid #ccc;
}
.btnheigh {
background-color: #fc7703;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<table>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
<td>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
<td>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</table>
</body>
</html>
How to solve this? Thanks!
Your first example has two dropdown elements. Your second only has one. So of course both dropdown-content elements will appear on a hover. I think you don't want that.
I put the grey abspos table after the button in the first cell instead of the last cell, so that it doesn't show up far to the right.
I made each row be class="dropdown" so that hovering anywhere in the row will trigger display:block for that particular row's grey table.
Made the left-most buttons have width:100% so that they'd be the same width even with different content.
edit: Gave buttons height:100% and gave td a definite height so that the buttons' % height can be resolved.
Added script to make the abspos table have the same width as the parent table. See comment below. edit: abspos table now gets its width from width:100% and making tr be the relpos container.
.dropbtn {
background-color: #04AA6D;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
width: 100%;
}
.btncritical {
background-color: #fc0303;
color: black;
padding: 16px;
font-size: 16px;
border: none;
border: 2px solid #ccc;
}
.btnheigh {
background-color: #fc7703;
color: black;
padding: 16px;
font-size: 16px;
border: 2px solid #ccc;
}
button {
height: 100%;
}
td {
/* Cell apparently has to have a definite height, even if it is ignored, to resolve a child's % height. */
height: 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
/* This width: 100% resolves off the relpos containing block, which is the tr.dropdown. */
width: 100%;
}
.dropdown {
position: relative;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<table id="bigtable">
<tr class="dropdown">
<td><button class="dropbtn">+ clickhouse-operator:0.20.1</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>some very very long country name</td>
</tr>
</table>
</div>
</td>
<td><button class="btncritical">critical: 2</button></td>
<td><button class="btnheigh">heigh: 1</button></td>
</tr>
<tr class="dropdown">
<td><button class="dropbtn">+ clickhouse-operator:0.20.1 longer</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
<td><button class="btncritical">critical: 2</button></td>
<td><button class="btnheigh">heigh: 1</button></td>
</tr>
</table>
Without touching your CSS, I tried to re-create what you wanted in this fiddle and think I was successful by shifting where your dropdown element is; ie: I created a new tr element and stored the dropdown div in a td element with a colspan of 3 (to match the prior tr's size) - here's a working example by editing your HTML (but keep the same CSS).
Working example in JSFiddle:
https://jsfiddle.net/ilanpatao/5zytep0b/12/
Updated HTML:
<div class="dropdown">
<table>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
</tr>
<tr>
<td colspan=3>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="width: 100%"><button class="dropbtn">+ clickhouse-operator:0.20.1</button></td>
<td style="width: 100%"><button class="btncritical">critical: 2</button></td>
<td style="width: 100%"><button class="btnheigh">heigh: 1</button></td>
</tr>
<tr>
<td colspan=3>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
This might be able to point you in the right direction with a little finessing/tweaking;

How to show second table when other is hidden by JS

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>

Table data overflows after table size reduced

Hello beautiful people of SO. Hope you're having a good day. So I got this weird issue which I'm unable to solve.
I have a table of data. I want it to be at a collapsed state with scroll at first then if the button is pressed then the size will increase based on the table rows inside. By that I mean the height will be auto.
An example would be the table here on right: example
At this moment, the div shrinks but the data is overflowing out.
Here's the pen: Codepen
Here's the snippet:
const expandCollapseBtn = $('#expand-collapse-btn');
$(expandCollapseBtn).click((e) => {
const divHeight = $(".data-container").height();
if ( divHeight > 400 ) {
$(".data-container").animate({"height": "200px"}, 100);
}
else if ($(".data-container").css("height") == "200px") {
$(".data-container").animate({"height": "400px"}, 100);
}
});
.data-container {
min-height: 45px;
background: #fff;
-webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
position: relative;
}
.data-container .bg-light {
font-size: 1.1rem;
border-bottom: 1px solid rgba(0,0,0,0.125);
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
font-weight: 700;
}
.data-container h2 {
font-size: 18px;
margin: 0;
padding: 0;
}
section .data-container .table-container .table-striped > tbody > tr:nth-child(2n+1) > td {
background-color: #f8f9fa;
line-height: 15px;
}
.data-container .table-container table tr td:first-child {
padding-left: 50px;
width: 49%;
text-align: right;
}
.data-container .table-container table tr td:nth-child(2) {
padding: 5px 0 5px 0;
width: 2%;
}
.data-container .table-container table tr td:last-child {
padding-left: 6px;
width: 49%;
}
.data-container .table-container table td {
padding: 5px 18px 5px 20px;
}
.data-container .table-container a {
font-size: 10px;
color: red;
text-decoration: underline;
}
.data-container .table-container tr {
height: 45px;
}
#flag-image {
width: 25px;
height: 25px;
}
.data-container button {
background-color: transparent;
color: #343a40;
border: none;
outline: none;
position: absolute;
left: 50%;
border-bottom-style: dotted;
transform: translateX(-50%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data-container w-75 m-auto">
<div class="card-header bg-light text-center pt-3 pb-3">
<h2>
Total: $200
</h2>
</div>
<div class="table-container">
<table class="table-striped w-100">
<tbody>
<tr>
<td>1</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>3</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>4</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>5</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>6</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>7</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>8</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>9</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>10</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
<button id="expand-collapse-btn">expand ↓</button>
</div>
Any help would be highly appreciated. Thanks
You should apply overflow-y: scroll; to .data-container . Though, since the "expand" button is also placed inside this div, it will only appear near the bottom when the div is scrolled to the end. If you want the button to remain static, you can apply the height restriction and scroll on .table-container instead
A little change to your script worked.
And also added overflow: scroll css to your data-container
const expandCollapseBtn = $('#expand-collapse-btn');
$(expandCollapseBtn).click((e) => {
const divHeight = $(".data-container").height();
if (divHeight >= 400) {
$(".data-container").animate({
"height": "200px"
}, 100);
} else if (divHeight <= 200) {
$(".data-container").animate({
"height": "400px"
}, 100);
}
});
.data-container {
min-height: 45px;
background: #fff;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .2);
position: relative;
overflow: scroll;
}
.data-container .bg-light {
font-size: 1.1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
font-weight: 700;
}
.data-container h2 {
font-size: 18px;
margin: 0;
padding: 0;
}
section .data-container .table-container .table-striped>tbody>tr:nth-child(2n+1)>td {
background-color: #f8f9fa;
line-height: 15px;
}
.data-container .table-container table tr td:first-child {
padding-left: 50px;
width: 49%;
text-align: right;
}
.data-container .table-container table tr td:nth-child(2) {
padding: 5px 0 5px 0;
width: 2%;
}
.data-container .table-container table tr td:last-child {
padding-left: 6px;
width: 49%;
}
.data-container .table-container table td {
padding: 5px 18px 5px 20px;
}
.data-container .table-container a {
font-size: 10px;
color: red;
text-decoration: underline;
}
.data-container .table-container tr {
height: 45px;
}
#flag-image {
width: 25px;
height: 25px;
}
.data-container button {
background-color: transparent;
color: #343a40;
border: none;
outline: none;
position: absolute;
left: 50%;
border-bottom-style: dotted;
transform: translateX(-50%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data-container w-75 m-auto">
<div class="card-header bg-light text-center pt-3 pb-3">
<h2>
Total: $200
</h2>
</div>
<div class="table-container">
<table class="table-striped w-100">
<tbody>
<tr>
<td>1</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>3</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>4</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>5</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>6</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>7</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>8</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>9</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>10</td>
<td>:</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
<button id="expand-collapse-btn">expand ↓</button>
</div>

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 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>

Categories