为什么 CSS 对 table 行宽度的媒体查询不起作用？

Question

这是我的代码，当屏幕尺寸超过 1000px 时，我想减小 table 中所有行的宽度（第一个 table 行除外）。我试过了，但这个媒体查询似乎不起作用。而且我还希望 table 的底部边框是圆形的，除了最左边的所有边框底部半径外，我尝试的代码都是圆形的谁能告诉我我错过了什么？我已经阅读了很多答案 none，其中似乎有效

@media screen and (min-width: 1000px) {
  .table-container {
    float: left;
    width: 15%;
  }
  .table-container:first-of-type {
    width: 40%;
  }
}

.table_container {
  float: left;
  width: 25%;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

table {
  margin: 0 auto;
  border-radius: 10px;
}

tr {
  padding: 15px;
  text-align: center;
}

td {
  color: black;
  text-align: center;
  vertical-align: middle;
  border: 1px double white;
  height: 50px;
  background-color: grey;
  width: 272px;
}

.sub_text {
  font-size: 12px;
  font-style: italic;
  color: #0071ce;
  font-weight: 100;
}

th {
  background-color: black;
  text-align: center;
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: white;
  font-weight: bold;
  height: 70px;
}

.header {
  color: #0071ce;
  font-weight: bold;
  padding: 10px;
}

.wrapper {
  text-align: center;
  margin-top: 20px;
}

table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 10px

<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> emp Only</td>
                <tr>
                    <td> emp + Spouse/partner</td>
                </tr>
                <tr>
                    <td> emp + child(ren)</td>
                </tr>
                <tr>
                    <td> emp + family</td>
                </tr>
                </tr>
                <tr>
                    <td class="header" rowspan="2"> Org’s annual max contribution<br>
                        <span class="sub_text">
                        </span>
                    </td>
                    <td> emp Only</td>
                <tr>
                    <td> emp + dependent(s)</td>
                </tr>
                </tr>
                <tr>
                    <td class="header" rowspan="2">Annua deductible<br>
                        <span class="sub_text">in-network care</span>
                    </td>
                    <td> emp Only</td>
                <tr>
                    <td> emp + dependent(s)</td>
                </tr>
                </tr>
            </table>

        </div>
<div class="table_container">
  <table id="table2" class="checkboxdiv">
    <tr>
      <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th>
    </tr>
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
    </tr>
    <tr>
      <td>G</td>
    </tr>
    <tr>
      <td>H</td>
    </tr>
  </table>
</div>

<div class="table_container">
  <table id="table2" class="checkboxdiv">
    <tr>
      <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th>
    </tr>
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
    </tr>
    <tr>
      <td>G</td>
    </tr>
    <tr>
      <td>H</td>
    </tr>
  </table>
</div>

<div class="table_container">
  <table id="table2" class="checkboxdiv">
    <tr>
      <th>Tab B<input type="checkbox" id="2" name="table2" value="table2"></th>
    </tr>
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
    </tr>
    <tr>
      <td>G</td>
    </tr>
    <tr>
      <td>H</td>
    </tr>
  </table>
</div>

    @media screen and (min-width: 800px) {
                
            .table-container {
                float: left;
                width: 15%;
            }
        }

Answer 1

您使用的是 .table-container，而不是上面的 .table_container。刚刚尝试过，它按预期工作。还要确保将它添加到样式表的底部。

@media screen and (min-width: 1000px) {
        .table_container {
            float: left;
            width: 15%;
        }

        .table_container:first-of-type() {
            width: 40%;
            
        }
    }

对于 bottom-border-radius，如果您试图避免使用类，那么如果您的 table 保持相同大小，这是一个有效的解决方案。如果添加列，则必须将 tr:nth-of-type(7) 调整为适当的数字。

table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px
}

.table_container:nth-of-type(1) tr:last-child td:first-child {
border-bottom-left-radius: 0;
}

.table_container:nth-of-type(1) tr:nth-of-type(7) td:first-child {
border-bottom-left-radius: 10px;
}

为什么 CSS 对 table 行宽度的媒体查询不起作用？

Why CSS Media query for width of table-rows not working?

html

css

html-table

media-queries