Table css 弄乱了缩小窗口

Question

我的代码工作正常，并且显示了应用了很好的CSS的表格，但是当我缩小窗口表格时，不同的列占用了不同的空间，表格变得混乱（我已在屏幕截图中附加）。基本上，我希望没有复选框的第一列保持完整（粘性），其余列在缩小窗口时启用滚动，占用相同的空间。我该如何解决这个问题，有人可以帮忙吗？

有什么方法可以保持表格容器的宽度与桌面视图中的宽度相同，而只需在移动视图中放置滚动条并固定第一列而不缩小表格？

就像这个例子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>
                    <

    

我使表格具有响应性，当屏幕尺寸减小时，表格将保留其原始尺寸，但滚动条将出现在 x 和 y 方向（这就是我在您的评论中读到的内容）我只是对一张表格执行了此操作。

我所做的就是封装该类.container并.parent_container 为其提供以下 css

.parent_container{
    max-width: 844px;
    height: 733px;
    overflow:auto;
width: 100%;
}

.parent_container这里我使用检查工具计算了宽度和高度。

我还提供了一个最小宽度，这样table当屏幕尺寸减小时它就不会缩小。

这对你有用

.parent_container{
    max-width: 844px;
    height: 733px;
    overflow:auto;
width: 100%;
}

* {
  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;
}

归档时间：	4 年，12 月 前
查看次数：	2286 次
最近记录：	4 年，11 月 前

相关归档

短语内容和流内容之间有什么区别？ 38

围绕中心css3旋转图像 28

Bootstrap模态z-index 27

使用svg作为背景图像的IE11失败 20

那里有jQueryUI LessCss模板吗？ 18

改变Slick Carousel的高度 16

位置相对,浮动将div从正常流量中取出 10

具有绝对位置的div的宽度取决于其父级的宽度？ 7

柔性间隙和柔性包裹百分比 6

如何使用JQuery从表中选择非空的最后一个单元格 2

难疑归档

仅存储使用Git更改的多个文件中的一个文件？ 2895

.prop()vs .attr() 2249

如何从Bash脚本检查程序是否存在？ 2032

'using'指令应该在命名空间的内部还是外部？ 1975

如何在Node.js中退出 1762

如何将元素移动到另一个元素？ 1611

如何将堆栈跟踪转换为字符串？ 1435

如何完全卸载Node.js,并从头开始重新安装(Mac OS X) 1196

如何从Git存储库中删除.DS_Store文件？ 1167

将文本粘贴到vim时关闭自动缩进 1119

Answer 1

我使表格具有响应性，当屏幕尺寸减小时，表格将保留其原始尺寸，但滚动条将出现在 x 和 y 方向（这就是我在您的评论中读到的内容）我只是对一张表格执行了此操作。

我所做的就是封装该类.container并.parent_container 为其提供以下 css

.parent_container{
    max-width: 844px;
    height: 733px;
    overflow:auto;
width: 100%;
}

.parent_container这里我使用检查工具计算了宽度和高度。

我还提供了一个最小宽度，这样table当屏幕尺寸减小时它就不会缩小。

这对你有用

.parent_container{
    max-width: 844px;
    height: 733px;
    overflow:auto;
width: 100%;
}

* {
  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;
}