I'm trying to put some box-shadow on some columns group of my html table but I'm getting an overlay of box-shadow on every <td>. (In my context, I can't split my table)
html :
<table>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
css :
table {
margin: 50px;
border-collapse: collapse;
}
td:not(.transparent) {
padding: 2em;
box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
}
td.transparent {
padding: 1em;
}
Actual look :
Wanted look :
It's kind of a hack but it ends up similar to what you want.
I added a span to each td.
The logic is to have a :before element to cover the inner td space with white (background). The span meant to bring the text one layer ahead.
So the layers are
Shadow (td) z-index: 0
White cover (:before) z-index: 1
Text (span) z-index: 2
table {
margin: 50px;
border-collapse: collapse;
}
td {
padding: 2em;
position: relative;
}
td:not(.transparent) {
box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
}
td:not(.transparent):before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 1;
}
td:not(.transparent) span {
position: relative;
z-index: 2;
}
td.transparent {
padding: 1em;
}
<table>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
</table>
Related
Turning the header cells (th) with background-color does not work.
The color bar is too small or the cell is too wide or the background is not turned.
How is it possible to create a narrow cell with long text and turn it including the background-color?
th {
white-space: nowrap;
/* height: 180px;*/
vertical-align: middle;
text-align: left;
width: 3em;
max-width: 2em;
/* min-width: 2em;*/
transform-origin: bottom left;
transform: translateX(20px) rotate(-45deg);
background-color: yellow;
}
<HTML>
<body>
<div style='height:110px;'></div>
<TABLE CELLPADDING=5 CELLSPACING=0>
<TR>
<TH>21st September </TH>
<TH>22nd September </TH>
<TH>23rd September </TH>
</TR>
<TR>
<TD >
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
<TR>
<TD>
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
<TR>
<TD >
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
</TABLE>
</body>
You could use span in th:
th {
white-space: nowrap;
vertical-align: middle;
text-align: left;
width: 3em;
max-width: 2em;
}
th span {
display: inline-block;
white-space: nowrap;
transform-origin: bottom left;
transform: translateX(20px) rotate(-45deg);
background-color: yellow;
}
<div style='height:110px;'></div>
<TABLE CELLPADDING=5 CELLSPACING=0>
<TR>
<TH><span>21st September</span></TH>
<TH><span>22nd September</span></TH>
<TH><span>23rd September</span></TH>
</TR>
<TR>
<TD >
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
<TR>
<TD>
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
<TR>
<TD >
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
</TABLE>
My code is working fine and displaying the tables with css well applied but when I am shrinking the window table is getting messed up with different columns taking up different space (I have attached in screenshot). Basically I want the first column which is without the checkbox to be intact(sticky) and rest columns to take equal space with a scroll enabled when I shrink the window . How do I fix that up, Can anyone please help?
Is there any way I keep the table container width as it is there in desktop view and just put a scroller in the mobile view with first column fixed and not shrink the tables?
like in this example https://codepen.io/paulobrien/pen/LBrMxa
.hero-button {
padding: 27px;
cursor: pointer;
text-decoration: none !important;
}
a .hero-button1 {
min-height: 36px;
letter-spacing: normal;
border-width: 2px;
border-style: solid;
border-color: rgb(255, 255, 255);
border-image: initial;
border-radius: 25px;
padding: 6px 50px;
text-decoration: none;
display: inline-block;
font-size: 14px;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 35px 0 0;
}
input {
color: black;
}
.table_container {
float: left;
width: 30rem;
margin-bottom: 3rem;
}
.table_container2 {
float: left;
width: 30rem;
margin-bottom: 3rem;
}
.container {
width: 100%;
margin-top: 30px;
display: flex;
justify-content: center
}
.container2 {
display: flex;
justify-content: center;
}
.checkcontainer {
width: 100%;
}
.container::after {
content: "";
clear: both;
display: table;
}
table {
margin: 2rem auto;
border-radius: 10px;
}
tr {
padding: 15px;
text-align: center;
}
td {
color: black;
text-align: center;
vertical-align: middle;
height: 60px;
background-color: #e1edf9;
width: 272px;
border-top: 1px solid white;
}
.sub_text {
font-size: 12px;
font-style: italic;
color: #003a6a;
font-weight: 100;
}
th {
background-color: #003a6a;
text-align: center;
padding: 0px 10px 0px 10px;
/*border-top-left-radius: 10px;*/
/*border-top-right-radius: 10px;*/
color: white;
font-weight: bold;
height: 75px;
}
.header {
color: #003a6a;
font-weight: bold;
padding: 10px;
border-right: 1px solid white;
}
.wrapper {
margin-top: 20px;
display: flex;
justify-content: center;
}
.modal-content {
top: 50% !important;
position: fixed !important;
}
table tr:last-child td:first-child {
/*border-bottom-left-radius: 10px;*/
}
table tr:last-child td:last-child {
/* border-bottom-right-radius: 10px;*/
}
#media screen and (min-width: 1400px) {
.table_container {
float: left;
width: 15rem;
}
.table_container:first-of-type {
width: 30rem;
}
}
#media screen and (min-width: 1400px) {
.table_container2 {
float: left;
width: 15rem;
}
.table_container2:first-of-type {
width: 30rem;
}
}
#media only screen and (min-width: 1000) and (max-device-width: 1400px) {
.table_container2 {
float: left;
width: 14rem;
}
.table_container2:first-of-type {
width: 27rem;
}
}
#media only screen and (min-width: 1000) and (max-device-width: 1400px) {
.table_container {
float: left;
width: 14rem;
}
.table_container:first-of-type {
width: 27rem;
}
}
.checks {
height: 20px;
background-color: #003A6A;
border-top: none;
}
.parent_container {
width: 100%;
text-align: center;
}
#modalButton {
background-color: #003A6A;
}
<div class="parent_container">
<div class="container">
<div class="table_container">
<table>
<thead>
<tr>
<th colspan="2">Cost</th>
</tr>
<tr>
</thead>
<td class="header" rowspan="4">Your cost per biweekly paycheck<br>
<span class="sub_text">Tobacco-free rates shown</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + Spouse/partner</td>
</tr>
<tr>
<td>employee + child(ren)</td>
</tr>
<tr>
<td>employee + family</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annual max contribution<br>
<span class="sub_text">
</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + dependent(s)</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annua deductible<br>
<span class="sub_text">in-network care</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + dependent(s)</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annual out-of-pocket maximum<br>
<span class="sub_text">in-network care</span>
</td>
<td>Per person</td>
<tr>
<td>Entire family</td>
</tr>
</tr>
</table>
</div>
<div class="table_container">
<table id="table1" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan NW <input type="checkbox" id=" 1" name="table1" value="table1"
onchange="myFunction(event)"> </th>
</tr>
</thead>
<tr>
<td>$133.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>$4 after deductible
$50 or 25% of allowed cost* after deductible</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$50 or 20% of allowed cost* after deductible
</td>
</tr>
<tr>
<td>$6000</td>
</tr>
<tr>
<td>$6650</td>
</tr>
<tr>
<td>$13300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table2" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan <input type="checkbox" id="2" name="table2" value="table2"
onchange="myFunction(event)"></th>
</tr>
</thead>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$6000</td>
</tr>
<tr>
<td>$660</td>
</tr>
<tr>
<td>$13300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table3" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan SW <input type="checkbox" id="3" name="table3" value="table3"
onchange="myFunction(event)"> </th>
</tr>
</thead>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$60</td>
</tr>
<tr>
<td>$660</td>
</tr>
<tr>
<td>$10</td>
</tr>
</table>
</div>
</div>
<div class="container2">
<div class="table_container">
<table>
<thead>
<tr>
<th colspan="2">Cost</th>
</tr>
<tr>
</thead>
<td class="header" rowspan="4">Your cost per biweekly paycheck<br>
<span class="sub_text">Tobacco-free rates shown</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + Spouse/partner</td>
</tr>
<tr>
<td>employee + child(ren)</td>
</tr>
<tr>
<td>employee + family</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annual max contribution<br>
<span class="sub_text">
</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + dependent(s)</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annua deductible<br>
<span class="sub_text">in-network care</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + dependent(s)</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annual out-of-pocket maximum<br>
<span class="sub_text">in-network care</span>
</td>
<td>Per person</td>
<tr>
<td>Entire family</td>
</tr>
</tr>
</table>
</div>
<div class="table_container">
<table id="table1" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan NW Arkansas <input type="checkbox" id=" 1" name="table1" value="table1"
onchange="myFunction(event)"> </th>
</tr>
</thead>
<tr>
<td>$133.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$6000</td>
</tr>
<tr>
<td>$6650</td>
</tr>
<tr>
<td>$13300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table2" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan NW Arkansas <input type="checkbox" id="2" name="table2" value="table2"
onchange="myFunction(event)"></th>
</tr>
</thead>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$6000</td>
</tr>
<tr>
<td>$660</td>
</tr>
<tr>
<td>$13300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table3" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan NW Arkansas <input type="checkbox" id="3" name="table3" value="table3"
onchange="myFunction(event)"> </th>
</tr>
</thead>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$60</td>
</tr>
<tr>
<td>$660</td>
</tr>
<tr>
<td>$10</td>
</tr>
</table>
</div>
</div>
<div class="wrapper">
<button type="button" id="modalButton" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="javascript: return false;" >
Click me
</button>
</div>
</div>
I made the table responsive in such a way that when the screen size reduces the table would retain its original dimensions but the scrollbar would appear in x and y directions(Thats what I read in your comment) I just did this for one table.
What I did was encapsulate the .container class with .parent_container
and gave it following css
.parent_container{
max-width: 844px;
height: 733px;
overflow:auto;
width: 100%;
}
here I calculated the width and height of .parent_container by using inspect tool.
Also I provided a min-width to the table so that the it won't shrink when screen size reduces.
This will work for u
* {
margin: 0px;
padding: 0px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
.parent_container {
max-height: 1164px;
max-width: 1181px;
width: 90%;
overflow: auto;
margin: 0px 20px;
padding: 5px 0;
}
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid white;
padding: 20px 10px;
min-width: 220px;
text-align: center;
}
.left_column td {
min-width: 110px;
}
td {
background: #E1EDF9;
}
th {
background: #003A6A;
color: white;
font-size: 18px;
position: sticky;
top: 0;
}
.left_column {
position: sticky;
width: 250px;
left: 0;
}
.side_header {
color: #003A6A;
font-weight: bold;
font-size: 20px;
}
.side_header span {
font-weight: normal;
}
span {
display: block;
font-size: 12px;
}
tr table tr td {
min-width: 220px;
}
<div class="parent_container">
<table>
<thead>
<tr>
<th colspan="2" style="position: sticky;left: 0;z-index: 10000;">
Cost
</th>
<th>
Saver Plan NW
<input type="checkbox" name="">
</th>
<th>
Saver Plan
<input type="checkbox" name="">
</th>
<th>
Saver Plan SW
<input type="checkbox" name="">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left_column" colspan="2" rowspan="4" style="padding: 0px">
<table style="">
<tr>
<td rowspan="5" class="side_header">
Your cost per biweekly paycheck <span>Tobacco-free rates shown</span>
</td>
</tr>
<tr>
<td>employee Only</td>
</tr>
<tr>
<td>employee + Spouse/partner</td>
</tr>
<tr>
<td>employee + child(ren)</td>
</tr>
<tr>
<td>employee + family</td>
</tr>
</table>
</td>
<td>$133.90</td>
<td>$33.90</td>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
<td>$161.30</td>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
<td>$53.30</td>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
<td>$186.20</td>
<td>$186.20</td>
</tr>
<tr>
<td class="left_column" colspan="2" rowspan="2" style="padding: 0px;">
<table>
<tr>
<td rowspan="3" class="side_header">
Annual max contribution
</td>
</tr>
<tr>
<td style="padding-top: 30px">employee Only</td>
</tr>
<tr>
<td style="padding-bottom: 30px">employee + dependent(s)</td>
</tr>
</table>
</td>
<td>$4 after deductible $50 or 25% of allowed cost* after deductible</td>
<td>HSA match:up to $350</td>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
<td>HSA match:up to $700</td>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td class="left_column" colspan="2" rowspan="2" style="padding: 0px;">
<table>
<tr>
<td rowspan="3" class="side_header">
Annua deductible<span>in-network care</span>
</td>
</tr>
<tr>
<td style="padding-top: 30px">employee Only</td>
</tr>
<tr>
<td style="padding-top: 30px">employee + dependent(s)</td>
</tr>
</table>
</td>
<td>$50 or 20% of allowed cost* after deductible</td>
<td>$3000</td>
<td>$3000</td>
</tr>
<tr>
<td>$6000</td>
<td>$6000</td>
<td>$60</td>
</tr>
<tr>
<td class="left_column" colspan="2" rowspan="2" style="padding: 0px;">
<table>
<tr>
<td rowspan="3" class="side_header">
Annual out-of-pocket maximum <span>in-network care</span>
</td>
</tr>
<tr>
<td>Per person</td>
</tr>
<tr>
<td>Entire family</td>
</tr>
</table>
</td>
<td>$6650</td>
<td>$660</td>
<td>$660</td>
</tr>
<tr>
<td>$13300</td>
<td>$13300</td>
<td>$10</td>
</tr>
</tbody>
</table>
</div>
<div class="parent_container">
<table>
<thead>
<tr>
<th colspan="2" style="position: sticky;left: 0;z-index: 10000;">
Cost
</th>
<th>
Saver Plan NW
<input type="checkbox" name="">
</th>
<th>
Saver Plan
<input type="checkbox" name="">
</th>
<th>
Saver Plan SW
<input type="checkbox" name="">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left_column" colspan="2" rowspan="4" style="padding: 0px">
<table style="">
<tr>
<td rowspan="5" class="side_header">
Your cost per biweekly paycheck <span>Tobacco-free rates shown</span>
</td>
</tr>
<tr>
<td>employee Only</td>
</tr>
<tr>
<td>employee + Spouse/partner</td>
</tr>
<tr>
<td>employee + child(ren)</td>
</tr>
<tr>
<td>employee + family</td>
</tr>
</table>
</td>
<td>$133.90</td>
<td>$33.90</td>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
<td>$161.30</td>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
<td>$53.30</td>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
<td>$186.20</td>
<td>$186.20</td>
</tr>
<tr>
<td class="left_column" colspan="2" rowspan="2" style="padding: 0px;">
<table>
<tr>
<td rowspan="3" class="side_header">
Annual max contribution
</td>
</tr>
<tr>
<td style="padding-top: 30px">employee Only</td>
</tr>
<tr>
<td style="padding-bottom: 30px">employee + dependent(s)</td>
</tr>
</table>
</td>
<td>$4 after deductible $50 or 25% of allowed cost* after deductible</td>
<td>HSA match:up to $350</td>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
<td>HSA match:up to $700</td>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td class="left_column" colspan="2" rowspan="2" style="padding: 0px;">
<table>
<tr>
<td rowspan="3" class="side_header">
Annua deductible<span>in-network care</span>
</td>
</tr>
<tr>
<td style="padding-top: 30px">employee Only</td>
</tr>
<tr>
<td style="padding-top: 30px">employee + dependent(s)</td>
</tr>
</table>
</td>
<td>$50 or 20% of allowed cost* after deductible</td>
<td>$3000</td>
<td>$3000</td>
</tr>
<tr>
<td>$6000</td>
<td>$6000</td>
<td>$60</td>
</tr>
<tr>
<td class="left_column" colspan="2" rowspan="2" style="padding: 0px;">
<table>
<tr>
<td rowspan="3" class="side_header">
Annual out-of-pocket maximum <span>in-network care</span>
</td>
</tr>
<tr>
<td>Per person</td>
</tr>
<tr>
<td>Entire family</td>
</tr>
</table>
</td>
<td>$6650</td>
<td>$660</td>
<td>$660</td>
</tr>
<tr>
<td>$13300</td>
<td>$13300</td>
<td>$10</td>
</tr>
</tbody>
</table>
</div>
So a lot of your problems came from using CSS versus HTML to format what you're table looked like. If you put it all into one table and then use CSS to enhance it, you run into a lot less problems. I redid your HTML and used the same CSS and it works fine. You will most likely want to remove a lot of those styles because they aren't necessary.
DEMO:
.hero-button {
padding: 27px;
cursor: pointer;
text-decoration: none !important;
}
a .hero-button1 {
min-height: 36px;
letter-spacing: normal;
border-width: 2px;
border-style: solid;
border-color: rgb(255, 255, 255);
border-image: initial;
border-radius: 25px;
padding: 6px 50px;
text-decoration: none;
display: inline-block;
font-size: 14px;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 35px 0 0;
}
input {
color: black;
}
.table_container {
float: left;
width: 30rem;
margin-bottom: 3rem;
}
.table_container2 {
float: left;
width: 30rem;
margin-bottom: 3rem;
}
.container {
width: 100%;
margin-top: 30px;
display: flex;
justify-content: center
}
.container2 {
display: flex;
justify-content: center;
}
.checkcontainer {
width: 100%;
}
.container::after {
content: "";
clear: both;
display: table;
}
table {
margin: 2rem auto;
border-radius: 10px;
}
tr {
padding: 15px;
text-align: center;
}
td {
color: black;
text-align: center;
vertical-align: middle;
height: 60px;
background-color: #e1edf9;
width: 272px;
border-top: 1px solid white;
}
.sub_text {
font-size: 12px;
font-style: italic;
color: #003a6a;
font-weight: 100;
}
th {
background-color: #003a6a;
text-align: center;
padding: 0px 10px 0px 10px;
/*border-top-left-radius: 10px;*/
/*border-top-right-radius: 10px;*/
color: white;
font-weight: bold;
height: 75px;
}
.header {
color: #003a6a;
font-weight: bold;
padding: 10px;
border-right: 1px solid white;
}
.wrapper {
margin-top: 20px;
display: flex;
justify-content: center;
}
.modal-content {
top: 50% !important;
position: fixed !important;
}
table tr:last-child td:first-child {
/*border-bottom-left-radius: 10px;*/
}
table tr:last-child td:last-child {
/* border-bottom-right-radius: 10px;*/
}
#media screen and (min-width: 1400px) {
.table_container {
float: left;
width: 15rem;
}
.table_container:first-of-type {
width: 30rem;
}
}
#media screen and (min-width: 1400px) {
.table_container2 {
float: left;
width: 15rem;
}
.table_container2:first-of-type {
width: 30rem;
}
}
#media only screen and (min-width: 1000) and (max-device-width: 1400px) {
.table_container2 {
float: left;
width: 14rem;
}
.table_container2:first-of-type {
width: 27rem;
}
}
#media only screen and (min-width: 1000) and (max-device-width: 1400px) {
.table_container {
float: left;
width: 14rem;
}
.table_container:first-of-type {
width: 27rem;
}
}
.checks {
height: 20px;
background-color: #003A6A;
border-top: none;
}
.parent_container {
width: 100%;
text-align: center;
}
#modalButton {
background-color: #003A6A;
margin: 0 auto;
display: block;
}
<table>
<thead>
<tr>
<th colspan="2">Cost
</th>
<th>Saver Plan NW <input type="checkbox" id="1" name="table1" value="table1" onchange="myFunction(event)">
</th>
<th>Saver Plan <input type="checkbox" id="2" name="table2" value="table2" onchange="myFunction(event)">
</th>
<th>Saver Plan SW <input type="checkbox" id="3" name="table3" value="table3" onchange="myFunction(event)">
</th>
</tr>
</thead>
<tr>
<td class="header" rowspan="4">Your cost per biweekly paycheck<br>
<span class="sub_text">Tobacco-free rates shown</span>
</td>
<td>employee Only</td>
<td>$133.90</td>
<td>$33.90</td>
<td>$33.90</td>
</tr>
<tr>
<td>employee + Spouse/partner</td>
<td>$161.30</td>
<td>$161.30</td>
<td>$161.30</td>
</tr>
<tr>
<td>employee + child(ren)</td>
<td>$53.30</td>
<td>$53.30</td>
<td>$53.30</td>
</tr>
<tr>
<td>employee + family</td>
<td>$186.20</td>
<td>$186.20</td>
<td>$186.20</td>
</tr>
<tr>
<td class="header" rowspan="2">Annual max contribution<br>
<span class="sub_text">
</span>
<td>employee Only</td>
<td>$4 after deductible $50 or 25% of allowed cost* after deductible</td>
<td>HSA match:up to $350</td>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>HSA match:up to $700</td>
<td>HSA match:up to $700</td>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td class="header" rowspan="2">Annua deductible<br>
<span class="sub_text">in-network care</span>
</td>
<td>employee Only</td>
<td>$50 or 20% of allowed cost* after deductible</td>
<td>$3000</td>
<td>$3000</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>$6000</td>
<td>$6000</td>
<td>$60</td>
</tr>
<tr>
<td class="header" rowspan="2">Annual out-of-pocket maximum<br>
<span class="sub_text">in-network care</span>
</td>
<td>Per person</td>
<td>$6650</td>
<td>$660</td>
<td>$660</td>
</tr>
<tr>
<td>Entire family</td>
<td>$13300</td>
<td>$13300</td>
<td>$10</td>
</tr>
</table>
<table>
<thead>
<tr>
<th colspan="2">Cost
</th>
<th>Saver Plan NW Arkansas <input type="checkbox" id="1" name="table1" value="table1"
onchange="myFunction(event)">
</th>
<th>Saver Plan NW Arkansas <input type="checkbox" id="2" name="table2" value="table2"
onchange="myFunction(event)">
</th>
<th>Saver Plan NW Arkansas <input type="checkbox" id="3" name="table3" value="table3"
onchange="myFunction(event)">
</th>
</tr>
</thead>
<tr>
<td class="header" rowspan="4">Your cost per biweekly paycheck<br>
<span class="sub_text">Tobacco-free rates shown</span>
</td>
<td>employee Only</td>
<td>$133.90</td>
<td>$33.90</td>
<td>$33.90</td>
</tr>
<tr>
<td>employee + Spouse/partner</td>
<td>$161.30</td>
<td>$161.30</td>
<td>$161.30</td>
</tr>
<tr>
<td>employee + child(ren)</td>
<td>$53.30</td>
<td>$53.30</td>
<td>$53.30</td>
</tr>
<tr>
<td>employee + family</td>
<td>$186.20</td>
<td>$186.20</td>
<td>$186.20</td>
</tr>
<tr>
<td class="header" rowspan="2">Annual max contribution<br>
<span class="sub_text">
</span>
<td>employee Only</td>
<td>HSA match:up to $350</td>
<td>HSA match:up to $350</td>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>HSA match:up to $700</td>
<td>HSA match:up to $700</td>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td class="header" rowspan="2">Annua deductible<br>
<span class="sub_text">in-network care</span>
</td>
<td>employee Only</td>
<td>$3000</td>
<td>$3000</td>
<td>$3000</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>$6000</td>
<td>$6000</td>
<td>$60</td>
</tr>
<tr>
<td class="header" rowspan="2">Annual out-of-pocket maximum<br>
<span class="sub_text">in-network care</span>
</td>
<td>Per person</td>
<td>$6650</td>
<td>$660</td>
<td>$660</td>
</tr>
<tr>
<td>Entire family</td>
<td>$13300</td>
<td>$13300</td>
<td>$10</td>
</tr>
</table>
You cannot do much only with css as you are trying to make 4 table fit next to each other.
I would recommand you to use jQuery. After you can add this code in readyand resize event to make sure that the height will be adapted correctly.
Demo:
var highestThead;
var arrayTR = [];
$(window).resize(resizeHeight);
$(document).ready(resizeHeight);
function resizeHeight(){
/* Loop to get the highest tr and store it to the array */
$(".table_container").each(function(){
if($(this).find("thead tr").innerHeight() > highestThead){
highestThead = $(this).find("thead tr").innerHeight();
}
var allTR = $(this).find("tbody tr");
for (i = 0; i < allTR.length; i++) {
if(arrayTR[i] == undefined || $(allTR[i]).innerHeight() > arrayTR[i]){
arrayTR[i] = $(allTR[i]).innerHeight();
}
}
});
/* Loop to set the highest tr to the whole tr */
$(".table_container").each(function(){
$(this).find("thead tr").css("height", highestThead+"px");
var allTR = $(this).find("tbody tr");
for (i = 0; i < allTR.length; i++) {
$(allTR[i]).css("height", arrayTR[i]+"px");
}
});
}
.hero-button {
padding: 27px;
cursor: pointer;
text-decoration: none !important;
}
a .hero-button1 {
min-height: 36px;
letter-spacing: normal;
border-width: 2px;
border-style: solid;
border-color: rgb(255, 255, 255);
border-image: initial;
border-radius: 25px;
padding: 6px 50px;
text-decoration: none;
display: inline-block;
font-size: 14px;
color: #fff;
font-weight: 600;
letter-spacing: 3px;
margin: 35px 0 0;
}
input {
color: black;
}
.table_container {
float: left;
width: 30rem;
margin-bottom: 3rem;
}
.table_container2 {
float: left;
width: 30rem;
margin-bottom: 3rem;
}
.container {
width: 100%;
margin-top: 30px;
display: flex;
justify-content: center
}
.container2 {
display: flex;
justify-content: center;
}
.checkcontainer {
width: 100%;
}
.container::after {
content: "";
clear: both;
display: table;
}
table {
margin: 2rem auto;
border-radius: 10px;
}
tr {
padding: 15px;
text-align: center;
}
td {
color: black;
text-align: center;
vertical-align: middle;
height: 60px;
background-color: #e1edf9;
width: 272px;
border-top: 1px solid white;
}
.sub_text {
font-size: 12px;
font-style: italic;
color: #003a6a;
font-weight: 100;
}
th {
background-color: #003a6a;
text-align: center;
padding: 0px 10px 0px 10px;
/*border-top-left-radius: 10px;*/
/*border-top-right-radius: 10px;*/
color: white;
font-weight: bold;
height: 75px;
}
.header {
color: #003a6a;
font-weight: bold;
padding: 10px;
border-right: 1px solid white;
}
.wrapper {
margin-top: 20px;
display: flex;
justify-content: center;
}
.modal-content {
top: 50% !important;
position: fixed !important;
}
table tr:last-child td:first-child {
/*border-bottom-left-radius: 10px;*/
}
table tr:last-child td:last-child {
/* border-bottom-right-radius: 10px;*/
}
#media screen and (min-width: 1400px) {
.table_container {
float: left;
width: 15rem;
}
.table_container:first-of-type {
width: 30rem;
}
}
#media screen and (min-width: 1400px) {
.table_container2 {
float: left;
width: 15rem;
}
.table_container2:first-of-type {
width: 30rem;
}
}
#media only screen and (min-width: 1000) and (max-device-width: 1400px) {
.table_container2 {
float: left;
width: 14rem;
}
.table_container2:first-of-type {
width: 27rem;
}
}
#media only screen and (min-width: 1000) and (max-device-width: 1400px) {
.table_container {
float: left;
width: 14rem;
}
.table_container:first-of-type {
width: 27rem;
}
}
.checks {
height: 20px;
background-color: #003A6A;
border-top: none;
}
.parent_container {
width: 100%;
text-align: center;
}
#modalButton {
background-color: #003A6A;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent_container">
<div class="container">
<div class="table_container">
<table>
<thead>
<tr>
<th colspan="2">Cost</th>
</tr>
</thead>
<td class="header" rowspan="4">Your cost per biweekly paycheck<br>
<span class="sub_text">Tobacco-free rates shown</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + Spouse/partner</td>
</tr>
<tr>
<td>employee + child(ren)</td>
</tr>
<tr>
<td>employee + family</td>
</tr>
<tr>
<td class="header" rowspan="2">Annual max contribution<br>
<span class="sub_text">
</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + dependent(s)</td>
</tr>
<tr>
<td class="header" rowspan="2">Annua deductible<br>
<span class="sub_text">in-network care</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + dependent(s)</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annual out-of-pocket maximum<br>
<span class="sub_text">in-network care</span>
</td>
<td>Per person</td>
<tr>
<td>Entire family</td>
</tr>
</tr>
</table>
</div>
<div class="table_container">
<table id="table1" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan NW <input type="checkbox" id=" 1" name="table1" value="table1"
onchange="myFunction(event)"> </th>
</tr>
</thead>
<tr>
<td>$133.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>$4 after deductible
$50 or 25% of allowed cost* after deductible</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$50 or 20% of allowed cost* after deductible
</td>
</tr>
<tr>
<td>$6000</td>
</tr>
<tr>
<td>$6650</td>
</tr>
<tr>
<td>$13300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table2" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan <input type="checkbox" id="2" name="table2" value="table2"
onchange="myFunction(event)"></th>
</tr>
</thead>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$6000</td>
</tr>
<tr>
<td>$660</td>
</tr>
<tr>
<td>$13300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table3" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan SW <input type="checkbox" id="3" name="table3" value="table3"
onchange="myFunction(event)"> </th>
</tr>
</thead>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$60</td>
</tr>
<tr>
<td>$660</td>
</tr>
<tr>
<td>$10</td>
</tr>
</table>
</div>
</div>
<div class="container2">
<div class="table_container">
<table>
<thead>
<tr>
<th colspan="2">Cost</th>
</tr>
<tr>
</thead>
<td class="header" rowspan="4">Your cost per biweekly paycheck<br>
<span class="sub_text">Tobacco-free rates shown</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + Spouse/partner</td>
</tr>
<tr>
<td>employee + child(ren)</td>
</tr>
<tr>
<td>employee + family</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annual max contribution<br>
<span class="sub_text">
</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + dependent(s)</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annua deductible<br>
<span class="sub_text">in-network care</span>
</td>
<td>employee Only</td>
<tr>
<td>employee + dependent(s)</td>
</tr>
</tr>
<tr>
<td class="header" rowspan="2">Annual out-of-pocket maximum<br>
<span class="sub_text">in-network care</span>
</td>
<td>Per person</td>
<tr>
<td>Entire family</td>
</tr>
</tr>
</table>
</div>
<div class="table_container">
<table id="table1" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan NW Arkansas <input type="checkbox" id=" 1" name="table1" value="table1"
onchange="myFunction(event)"> </th>
</tr>
</thead>
<tr>
<td>$133.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$6000</td>
</tr>
<tr>
<td>$6650</td>
</tr>
<tr>
<td>$13300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table2" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan NW Arkansas <input type="checkbox" id="2" name="table2" value="table2"
onchange="myFunction(event)"></th>
</tr>
</thead>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$6000</td>
</tr>
<tr>
<td>$660</td>
</tr>
<tr>
<td>$13300</td>
</tr>
</table>
</div>
<div class="table_container">
<table id="table3" class="checkboxdiv">
<thead>
<tr>
<th>Saver Plan NW Arkansas <input type="checkbox" id="3" name="table3" value="table3"
onchange="myFunction(event)"> </th>
</tr>
</thead>
<tr>
<td>$33.90</td>
</tr>
<tr>
<td>$161.30</td>
</tr>
<tr>
<td>$53.30</td>
</tr>
<tr>
<td>$186.20</td>
</tr>
<tr>
<td>HSA match:up to $350</td>
</tr>
<tr>
<td>HSA match:up to $700</td>
</tr>
<tr>
<td>$3000</td>
</tr>
<tr>
<td>$60</td>
</tr>
<tr>
<td>$660</td>
</tr>
<tr>
<td>$10</td>
</tr>
</table>
</div>
</div>
<div class="wrapper">
<button type="button" id="modalButton" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="javascript: return false;" >
Click me
</button>
</div>
</div>
I would like to know if there exists a technique to make the text set at the same line or at the same level because what I did is to add a line-height for my two first blocks but if I add a line-height for the others there is still a difference. It creates a weird look because my titles are not the same in each cell.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>
All you need is vertical-align:baseline on the table cells. td elements have vertical-align:middle by default.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
vertical-align:baseline;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>
I am trying to make a transition for table body when I hover over it such that it disappears and the only thing left in the table is the table head. I am new at transitions so maybe I'm doing it wrong. What i expected was the table body slowly going up until 0px, but it doesn't. Also i need to use only CSS. Can you help me? Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
thead {
color: red;
}
table,
th {
border: 3px solid black;
}
tr {
background: #FFFF66;
}
tbody {
color: blue;
transition: max-height 2s;
}
tbody:hover {
transition: max-height 2s ease;
max-height: 0px;
}
</style>
</head>
<body>
<h2>Most Watched Shows:</h2>
<table width="70%">
<thead>
<tr>
<th>Top 5</th>
<th>6-10</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a>
</td>
<td>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a>
</td>
</tr>
<tr>
<td>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a>
</td>
<td>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a>
</td>
</tr>
<tr>
<td>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a>
</td>
<td>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a>
</td>
</tr>
<tr>
<td>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a>
</td>
<td>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a>
</td>
</tr>
<tr>
<td>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a>
</td>
<td>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I tried something different and I applied a div for table data td and it works :D
<!DOCTYPE html>
<html>
<head>
<style>
thead {
color: red;
}
table,
th {
border: 3px solid black;
border-collapse: collapse;
}
tr {
background: #FFFF66;
}
td {
border: 1px solid red;
}
div {
transition: max-height 1.5s ease;
overflow: hidden;
max-height: 50px;
}
table:hover div {
transition: max-height 2s ease;
max-height: 0px;
}
</style>
</head>
<body>
<h2>Most Watched Shows:</h2>
<table width="70%">
<thead>
<tr>
<th>Top 5</th>
<th>6-10</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a>
</div>
</td>
<td>
<div>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a>
<div>
</td>
</tr>
<tr>
<td>
<div>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a>
</div>
</td>
<td>
<div>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a>
<div>
</td>
</tr>
<tr>
<td>
<div>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a>
<div>
</td>
<td>
<div>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a>
<div>
</td>
</tr>
<tr>
<td>
<div>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a>
<div>
</td>
<td>
<div>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a>
<div>
</td>
</tr>
<tr>
<td>
<div>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a>
<div>
</td>
<td>
<div>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a>
<div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a table with numerical data and I want to show a bar for every row. The challenge is to have grid lines like those found in Chrome dev tools:
You see those lines that say 400ms, 600ms, etc? That's what I'm after. One solution is to have multiple columns in the table but then how can the bar expand across multiple columns? Another solution is to use some sort of repeating background image that has those lines, but then it's tricky to adjust it for various designs (for example if the padding changes or if I want to change the grid color I have to redo the image, etc.)
I have come up with the code below but got stuck with the grid part. I want grid lines on 25%, 50%, 75% and 100%. Grids should be lines that go all over the bars all the way down to the bottom of the table.
table {
background-color: gray;
}
td {
width: 200px;
background-color: lightgray;
}
.bar {
background-color: red;
height: 1em;
}
<table>
<tr>
<th>value</th>
<th>25%| 50%| 75%| 100%|</th>
</tr>
<tr>
<th>100</th>
<td><div class="bar" style="width: 100%">.</div></td>
</tr>
<tr>
<th>80</th>
<td><div class="bar" style="width: 80%">.</div></td>
</tr>
<tr>
<th>95</th>
<td><div class="bar" style="width: 95%">.</div></td>
</tr>
<tr>
<th>18</th>
<td><div class="bar" style="width: 18%">.</div></td>
</tr>
<tr>
<th>5</th>
<td><div class="bar" style="width: 5%">.</div></td>
</tr>
</table>
And this is the result I want:
table {
width: 30%;
}
th, td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
width: 20%;
text-align: center;
font-weight: bold;
padding: 0px;
}
th{
background: #606060;
border: none;
border-right: 1px solid black;
}
td {
vertical-align: top;
z-index: -1;
}
.bar-row td {
position: relative;
height: 0px;
font-size: 0px;
border-width: 0px;
}
.bar {
background: #f00;
height: 15px;
position: absolute;
top: -17px;
}
<table cellspacing="0">
<tr>
<th>value</th>
<th>25%</th>
<th>50%</th>
<th>75%</th>
<th>100%</th>
</tr>
<tr>
<th rowspan="2">100</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 100%" class="bar"><div></td>
</tr>
<tr class="grey-bg">
<th rowspan="2">80</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 80%" class="bar"><div></td>
</tr>
<tr>
<th rowspan="2">95</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 95%" class="bar"><div></td>
</tr>
<tr class="grey-bg">
<th rowspan="2">18</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 18%" class="bar"><div></td>
</tr>
<tr>
<th rowspan="2">5</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 5%" class="bar"><div></td>
</tr>
</table>
The complete solution you may here.
The main idea is to add 2 separate tr for each line: one for background, ticks, etc and another one - for the bar iteself. The 2nd row contains only 2 cells: for heading and for the bar. So the 2ns cell has width of 100%. Changing width of the div inside will draw the correct bar. Also div has to be shifted to the upper row:
.bar {
height: 15px;
position: absolute;
top: -17px;
}
but to make it works - the row has to become relative:
.bar-row td {
position: relative;
height: 0px;
font-size: 0px;
border-width: 0px;
}
table {
width: 100%;
}
th, td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
width: 20%;
text-align: right;
padding: 0px;
}
td {
vertical-align: top;
}
.grey-bg {
background: #ccc;
}
.bar-row td {
position: relative;
height: 0px;
font-size: 0px;
border-width: 0px;
}
.bar {
background: #f00;
height: 15px;
position: absolute;
top: -17px;
}
<table cellspacing="0">
<tr>
<th>value</th>
<th>25%</th>
<th>50%</th>
<th>75%</th>
<th>100%</th>
</tr>
<tr>
<th rowspan="2">100</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 100%" class="bar"><div></td>
</tr>
<tr class="grey-bg">
<th rowspan="2">80</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 80%" class="bar"><div></td>
</tr>
<tr>
<th rowspan="2">95</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 95%" class="bar"><div></td>
</tr>
<tr class="grey-bg">
<th rowspan="2">18</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 18%" class="bar"><div></td>
</tr>
<tr>
<th rowspan="2">5</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar-row">
<td colspan="4"><div style="width: 5%" class="bar"><div></td>
</tr>
</table>