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

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;

Related

th and td not getting same width

I am not able to match the width of td and th and get a gap between the table and the scrollbar.
.table_fixed tbody {
display: block;
height: 500px;
overflow-y: scroll;
}
.table_fixed thead {
display: block;
}
Please see the below jsfiddle to see the entire code:
https://jsfiddle.net/w80bz1vc/

There was some unnecessary css which I've removed,
These two rules specifically,
.table_fixed tbody {
display: block;
height: 500px;
overflow-y: scroll;
}
.table_fixed thead {
display: block;
float: inline-end;
}
As a rule of thumb, try not to change the display property of the default table elements as much as possible.
body {
background-image: url("https://img.collegedekhocdn.com/media/img/institute/crawled_images/10450_gogte_new.jpg?tr=w-250,h-150");
background-repeat: round;
background-attachment: fixed;
background-size: cover;
}
#logo {
position: fixed;
top: 0;
left: 0;
}
table {
font-family: arial, sans-serif;
width: 70%;
margin: 0 auto;
border: 1px solid;
}
td,
th {
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f3e5f5;
}
tr:nth-child(odd) {
background-color: #fff;
}
h2 {
text-align: center;
font-family: "Times New Roman", Times, serif;
margin: 1rem;
}
.pink-bg {
background-color: #f3e5f5;
}
#admin-login-id {
justify-content: flex;
position: absolute;
right: 45%;
align-content: center;
}
.loader {
position: absolute;
bottom: 50%;
right: 50%;
}
.admin_button {
text-align: center;
}
.add_button {
text-align: center;
display: none;
}
.title_class {
display: none;
}
.add2_button {
display: none;
text-align: center;
}
.disable-delete {
cursor: pointer;
color: gray;
}
.active-delete {
cursor: pointer;
/* add external cursor */
color: Black;
background-color: red;
}
<table class="tab_id table_fixed" style="">
<!--Spinner -->
<thead>
<tr class="th purple lighten-2">
<th class="sem_count" colspan="2">BCA I Sem</th>
<th class="sem_count" colspan="2">BCA II Sem</th>
<th class="sem_count" colspan="2">BCA III Sem</th>
<th class="remove_col"></th>
</tr>
<tr class="purple lighten-4">
<th>Subject</th>
<th>Professor</th>
<th>Subject</th>
<th>Professor</th>
<th>Subject</th>
<th>Professor</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Mathematics_class">Mathematics</td>
<td>Sharma Sir</td>
<td class="Mathematics_class">Mathematics</td>
<td>Sharma Sir</td>
<td class="Mathematics_class">Mathematics</td>
<td>Sharma Sir</td>
<td><i onclick="deleteSubject('Mathematics')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="English_class">English</td>
<td>Gouri Mam</td>
<td class="English_class">English</td>
<td>Gouri Mam</td>
<td class="English_class">English</td>
<td>Gouri Mam</td>
<td><i onclick="deleteSubject('English')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Sanskrit_class">Sanskrit</td>
<td>Virat Sir</td>
<td class="Sanskrit_class">Sanskrit</td>
<td>Virat Sir</td>
<td class="Sanskrit_class">Sanskrit</td>
<td>Virat Sir</td>
<td><i onclick="deleteSubject('Sanskrit')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Science_class">Science</td>
<td>Shivani Mam</td>
<td class="Science_class">Science</td>
<td>Shivani Mam</td>
<td class="Science_class">Science</td>
<td>Shivani Mam</td>
<td><i onclick="deleteSubject('Science')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Electronics_class">Electronics</td>
<td>Shishir Sir</td>
<td class="Electronics_class">Electronics</td>
<td>Shishir Sir</td>
<td class="Electronics_class">Electronics</td>
<td>Shishir Sir</td>
<td><i onclick="deleteSubject('Electronics')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Testing_class">Testing</td>
<td>Vaishali Mam</td>
<td class="Testing_class">Testing</td>
<td>Vaishali Mam</td>
<td class="Testing_class">Testing</td>
<td>Vaishali Mam</td>
<td><i onclick="deleteSubject('Testing')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Chemestry_class">Chemestry</td>
<td>Subbu Sir</td>
<td class="Chemestry_class">Chemestry</td>
<td>Subbu Sir</td>
<td class="Chemestry_class">Chemestry</td>
<td>Subbu Sir</td>
<td><i onclick="deleteSubject('Chemestry')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Hindi_class">Hindi</td>
<td>Jadu sir</td>
<td class="Hindi_class">Hindi</td>
<td>Jadu sir</td>
<td class="Hindi_class">Hindi</td>
<td>Jadu sir</td>
<td><i onclick="deleteSubject('Hindi')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="A_class">A</td>
<td>ASD</td>
<td class="A_class">A</td>
<td>ASD</td>
<td class="A_class">A</td>
<td>ASD</td>
<td><i onclick="deleteSubject('A')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="R_class">R</td>
<td>FGH</td>
<td class="R_class">R</td>
<td>FGH</td>
<td class="R_class">R</td>
<td>FGH</td>
<td><i onclick="deleteSubject('R')" class="material-icons active-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
<tr>
<td class="Physics_class">Physics</td>
<td>Ramesh</td>
<td class="Physics_class">Physics</td>
<td>Ramesh</td>
<td class="Physics_class">Physics</td>
<td>Ramesh</td>
<td><i onclick="deleteSubject('Physics')" class="material-icons disable-delete" style="background-color: red; color: black;">delete</i></td>
</tr>
</tbody>
</table>

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 display a circle within a td by adding a class?

I have a table and I would like to change a class on the td by clicking them. When I addClass() each cell changes but it seems override any class.
My desired result for each cell is like this:
How can I achieve this by adding a class to them?
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
background-color: aqua;
}
.outpatient {
background-color: yellow;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

To achieve this can create another element inside each td. The td will be used to display the square with the teal background. The inner element is necessary to show the circle with the yellow background. By default the circle can be hidden, and then displayed when the class is added to the parent td. Try this:
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
overflow: hidden;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
cursor: pointer;
background-color: aqua;
padding: 0;
margin: 0;
position: relative;
}
td div {
width: 32px;
height: 32px;
border: 1px solid transparent;
line-height: 32px;
margin: -1px;
box-sizing: border-box;
}
td.outpatient div {
background-color: yellow;
border-radius: 50%;
border-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
<td><div>5</div></td>
<td><div>6</div></td>
</tr>
<tr>
<td><div>7</div></td>
<td><div>8</div></td>
<td><div>9</div></td>
</tr>
</table>

You can consider background-image with radial-gradient to create the circle above the background-color
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 15px;
cursor: pointer;
background-color:aqua;
}
.outpatient {
background-image:
radial-gradient(farthest-side,yellow calc(100% - 3px),#000 calc(100% - 2px),transparent 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

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