Table css is messing up on shrinking the window - css

Question

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>

Answer 1

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>

Answer 2

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>

Answer 3

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>