Table css 在缩小 window 时搞砸了
Table css is messing up on shrinking the window
我的代码工作正常并且显示 tables 并且 css 应用得很好但是当我缩小时 window table 被不同的列弄乱了占用不同的space（我附在屏幕截图中）。基本上，我希望没有复选框的第一列保持完整（粘性），其余列在 space 缩小 window 时启用滚动。我该如何解决这个问题，有人可以帮忙吗？
有什么方法可以保持 table 容器宽度，因为它在桌面视图中存在，而只是在移动视图中放置一个滚动条，第一列固定，而不缩小 tables？
就像这个例子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>3.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td> after deductible
or 25% of allowed cost* after deductible</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td> or 20% of allowed cost* after deductible
</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>50</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td></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>3.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>50</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td></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>
你不能只用 css 做很多事情，因为你试图让 4 table 彼此相邻。
我建议您使用 jQuery。您可以在 ready 和 resize 事件中添加此代码以确保正确调整高度。
演示：
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>3.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td> after deductible
or 25% of allowed cost* after deductible</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td> or 20% of allowed cost* after deductible
</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>50</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td></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>3.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>50</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td></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>
所以你的很多问题都来自于使用 CSS 而不是 HTML 来格式化你 table 的样子。如果你把它全部放在一个 table 中，然后使用 CSS 来增强它，你 运行 就会少很多问题。我重做了你的 HTML 并使用了相同的 CSS 并且它工作正常。您很可能希望删除其中的很多样式，因为它们不是必需的。
演示：
.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>3.90</td>
<td>.90</td>
<td>.90</td>
</tr>
<tr>
<td>employee + Spouse/partner</td>
<td>1.30</td>
<td>1.30</td>
<td>1.30</td>
</tr>
<tr>
<td>employee + child(ren)</td>
<td>.30</td>
<td>.30</td>
<td>.30</td>
</tr>
<tr>
<td>employee + family</td>
<td>6.20</td>
<td>6.20</td>
<td>6.20</td>
</tr>
<tr>
<td class="header" rowspan="2">Annual max contribution<br>
<span class="sub_text">
</span>
<td>employee Only</td>
<td> after deductible or 25% of allowed cost* after deductible</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</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> or 20% of allowed cost* after deductible</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>00</td>
<td>00</td>
<td></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>50</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Entire family</td>
<td>300</td>
<td>300</td>
<td></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>3.90</td>
<td>.90</td>
<td>.90</td>
</tr>
<tr>
<td>employee + Spouse/partner</td>
<td>1.30</td>
<td>1.30</td>
<td>1.30</td>
</tr>
<tr>
<td>employee + child(ren)</td>
<td>.30</td>
<td>.30</td>
<td>.30</td>
</tr>
<tr>
<td>employee + family</td>
<td>6.20</td>
<td>6.20</td>
<td>6.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 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</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>00</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>00</td>
<td>00</td>
<td></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>50</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Entire family</td>
<td>300</td>
<td>300</td>
<td></td>
</tr>
</table>
我让 table 以这样的方式响应，当屏幕尺寸减小时 table 将保留其原始尺寸，但滚动条将出现在 x 和 y 方向（这就是我读到的在你的评论中）我只是为一个 table.
做了这个
我所做的是用 .parent_container 封装 .container class
并在 css
之后给了它
.parent_container{
max-width: 844px;
height: 733px;
overflow:auto;
width: 100%;
}
这里我用inspect工具计算了.parent_container的宽高
我还为 table 提供了一个最小宽度，这样它就不会在屏幕尺寸缩小时缩小。
这对你有用
* {
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>3.90</td>
<td>.90</td>
<td>.90</td>
</tr>
<tr>
<td>1.30</td>
<td>1.30</td>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
<td>.30</td>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
<td>6.20</td>
<td>6.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> after deductible or 25% of allowed cost* after deductible</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</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> or 20% of allowed cost* after deductible</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
<td></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>50</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td></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>3.90</td>
<td>.90</td>
<td>.90</td>
</tr>
<tr>
<td>1.30</td>
<td>1.30</td>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
<td>.30</td>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
<td>6.20</td>
<td>6.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> after deductible or 25% of allowed cost* after deductible</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</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> or 20% of allowed cost* after deductible</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
<td></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>50</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td></td>
</tr>
</tbody>
</table>
</div>
我的代码工作正常并且显示 tables 并且 css 应用得很好但是当我缩小时 window table 被不同的列弄乱了占用不同的space（我附在屏幕截图中）。基本上，我希望没有复选框的第一列保持完整（粘性），其余列在 space 缩小 window 时启用滚动。我该如何解决这个问题，有人可以帮忙吗？
有什么方法可以保持 table 容器宽度，因为它在桌面视图中存在，而只是在移动视图中放置一个滚动条，第一列固定，而不缩小 tables？
就像这个例子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>3.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td> after deductible
or 25% of allowed cost* after deductible</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td> or 20% of allowed cost* after deductible
</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>50</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td></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>3.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>50</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td></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>
你不能只用 css 做很多事情，因为你试图让 4 table 彼此相邻。
我建议您使用 jQuery。您可以在 ready 和 resize 事件中添加此代码以确保正确调整高度。
演示：
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>3.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td> after deductible
or 25% of allowed cost* after deductible</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td> or 20% of allowed cost* after deductible
</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>50</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td></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>3.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>50</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>300</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>.90</td>
</tr>
<tr>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>00</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td></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>
所以你的很多问题都来自于使用 CSS 而不是 HTML 来格式化你 table 的样子。如果你把它全部放在一个 table 中，然后使用 CSS 来增强它，你 运行 就会少很多问题。我重做了你的 HTML 并使用了相同的 CSS 并且它工作正常。您很可能希望删除其中的很多样式，因为它们不是必需的。
演示：
.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>3.90</td>
<td>.90</td>
<td>.90</td>
</tr>
<tr>
<td>employee + Spouse/partner</td>
<td>1.30</td>
<td>1.30</td>
<td>1.30</td>
</tr>
<tr>
<td>employee + child(ren)</td>
<td>.30</td>
<td>.30</td>
<td>.30</td>
</tr>
<tr>
<td>employee + family</td>
<td>6.20</td>
<td>6.20</td>
<td>6.20</td>
</tr>
<tr>
<td class="header" rowspan="2">Annual max contribution<br>
<span class="sub_text">
</span>
<td>employee Only</td>
<td> after deductible or 25% of allowed cost* after deductible</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</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> or 20% of allowed cost* after deductible</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>00</td>
<td>00</td>
<td></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>50</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Entire family</td>
<td>300</td>
<td>300</td>
<td></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>3.90</td>
<td>.90</td>
<td>.90</td>
</tr>
<tr>
<td>employee + Spouse/partner</td>
<td>1.30</td>
<td>1.30</td>
<td>1.30</td>
</tr>
<tr>
<td>employee + child(ren)</td>
<td>.30</td>
<td>.30</td>
<td>.30</td>
</tr>
<tr>
<td>employee + family</td>
<td>6.20</td>
<td>6.20</td>
<td>6.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 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</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>00</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>employee + dependent(s)</td>
<td>00</td>
<td>00</td>
<td></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>50</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Entire family</td>
<td>300</td>
<td>300</td>
<td></td>
</tr>
</table>
我让 table 以这样的方式响应，当屏幕尺寸减小时 table 将保留其原始尺寸，但滚动条将出现在 x 和 y 方向（这就是我读到的在你的评论中）我只是为一个 table.
做了这个我所做的是用 .parent_container 封装 .container class
并在 css
.parent_container{
max-width: 844px;
height: 733px;
overflow:auto;
width: 100%;
}
这里我用inspect工具计算了.parent_container的宽高
我还为 table 提供了一个最小宽度，这样它就不会在屏幕尺寸缩小时缩小。
这对你有用
* {
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>3.90</td>
<td>.90</td>
<td>.90</td>
</tr>
<tr>
<td>1.30</td>
<td>1.30</td>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
<td>.30</td>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
<td>6.20</td>
<td>6.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> after deductible or 25% of allowed cost* after deductible</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</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> or 20% of allowed cost* after deductible</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
<td></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>50</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td></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>3.90</td>
<td>.90</td>
<td>.90</td>
</tr>
<tr>
<td>1.30</td>
<td>1.30</td>
<td>1.30</td>
</tr>
<tr>
<td>.30</td>
<td>.30</td>
<td>.30</td>
</tr>
<tr>
<td>6.20</td>
<td>6.20</td>
<td>6.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> after deductible or 25% of allowed cost* after deductible</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
</tr>
<tr>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</td>
<td>HSA match:up to 0</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> or 20% of allowed cost* after deductible</td>
<td>00</td>
<td>00</td>
</tr>
<tr>
<td>00</td>
<td>00</td>
<td></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>50</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td></td>
</tr>
</tbody>
</table>
</div>