我的代码工作正常,并显示应用了 css 的表格,但是当我缩小窗口表格时,不同的列占用了不同的空间(我已在屏幕截图中附加)。基本上,我希望没有复选框的第一列是完整的(粘性),而当我缩小窗口时,其余列在启用滚动的情况下占据相等的空间。我该如何解决这个问题,有人可以帮忙吗?
有什么方法可以保持表格容器的宽度,就像它在桌面 View 中一样,只是在移动 View 中放置一个滚动条,第一列是固定的,而不是缩小表格?
就像在这个例子中 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>
最佳答案
我以这样的方式使表格响应,当屏幕尺寸减小时表格将保留其原始尺寸,但滚动条将出现在 x 和 y 方向(这就是我在您的评论中读到的)我只是为一张 table 做了这个。
我所做的是封装 .container
.parent_container
的类(class)
并在css之后给它
.parent_container{
max-width: 844px;
height: 733px;
overflow:auto;
width: 100%;
}
这里我计算了.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>$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>
关于css - 表格 css 在缩小窗口时搞砸了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67399332/