表格 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>
                    </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>

Answer 1

因此，您的很多问题都来自使用 CSS 与 HTML 来格式化表格的外观。如果您将所有内容都放在一张表格中，然后使用 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>$133.90</td>
    <td>$33.90</td>
    <td>$33.90</td>
  </tr>
  <tr>
    <td>employee + Spouse/partner</td>
    <td>$161.30</td>
    <td>$161.30</td>
    <td>$161.30</td>
  </tr>
  <tr>
    <td>employee + child(ren)</td>
    <td>$53.30</td>
    <td>$53.30</td>
    <td>$53.30</td>
  </tr>
  <tr>
    <td>employee + family</td>
    <td>$186.20</td>
    <td>$186.20</td>
    <td>$186.20</td>
  </tr>
  <tr>
    <td class="header" rowspan="2">Annual max contribution<br>
      <span class="sub_text">
      </span>
    <td>employee Only</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>employee + dependent(s)</td>
    <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="header" rowspan="2">Annua deductible<br>
      <span class="sub_text">in-network care</span>
    </td>
    <td>employee Only</td>
    <td>$50 or 20% of allowed cost* after deductible</td>
    <td>$3000</td>
    <td>$3000</td>
  </tr>
  <tr>
    <td>employee + dependent(s)</td>
    <td>$6000</td>
    <td>$6000</td>
    <td>$60</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>$6650</td>
    <td>$660</td>
    <td>$660</td>
  </tr>
  <tr>
    <td>Entire family</td>
    <td>$13300</td>
    <td>$13300</td>
    <td>$10</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>$133.90</td>
    <td>$33.90</td>
    <td>$33.90</td>
  </tr>
  <tr>
    <td>employee + Spouse/partner</td>
    <td>$161.30</td>
    <td>$161.30</td>
    <td>$161.30</td>
  </tr>
  <tr>
    <td>employee + child(ren)</td>
    <td>$53.30</td>
    <td>$53.30</td>
    <td>$53.30</td>
  </tr>
  <tr>
    <td>employee + family</td>
    <td>$186.20</td>
    <td>$186.20</td>
    <td>$186.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 $350</td>
    <td>HSA match:up to $350</td>
    <td>HSA match:up to $350</td>
  </tr>
  <tr>
    <td>employee + dependent(s)</td>
    <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="header" rowspan="2">Annua deductible<br>
      <span class="sub_text">in-network care</span>
    </td>
    <td>employee Only</td>
    <td>$3000</td>
    <td>$3000</td>
    <td>$3000</td>
  </tr>
  <tr>
    <td>employee + dependent(s)</td>
    <td>$6000</td>
    <td>$6000</td>
    <td>$60</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>$6650</td>
    <td>$660</td>
    <td>$660</td>
  </tr>
  <tr>
    <td>Entire family</td>
    <td>$13300</td>
    <td>$13300</td>
    <td>$10</td>
  </tr>
</table>

Answer 2

我使表格具有响应性，当屏幕尺寸减小时，表格将保持其原始尺寸，但滚动条会出现在 x 和 y 方向（这就是我在您的评论中读到的）我只是为一个表。

我所做的是用 .container 封装 .parent_container 类 并给它以下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>

Answer 3

你不能只用 css 做很多事情，因为你试图让 4 个表格彼此相邻。

我建议您使用 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>$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>