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>