css - 表格 css 在缩小窗口时搞砸了

标签 css html-table flexbox css-selectors css-position

我的代码工作正常,并显示应用了 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/

相关文章:

调用函数后 JQuery 不工作

html - 如何使用flexbox对齐一些 block

css - 尝试使用 CSS (flexbox) 垂直对齐文本

android - phonegap 中的水平 ScrollView

css - Cordova - jQuery Mobile - 不需要的 CSS

html - 如何将具有定义宽度和高度的 div 定位在另一个 div 的中心?

css - Flexbox 容器元素左对齐

php - 使用带有 $id 参数的路由后,Laravel 导航栏不工作?

HTML 电子邮件 : adjust vertical line height according to the content in another td

html - 关于性能的分区与表格