html - 如何使用 css 为不同的分辨率设置 td 和 div 的宽度

Question

我有一张桌子和 div。根据不同的屏幕分辨率（1920px、1440px、1536px），div 应该与<td>. 我尝试了媒体查询<td>，<div>但它不起作用。关于如何完成这项工作的任何帮助和建议将对我有很大帮助。

table {
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  height: 100%;
  table-layout: fixed;
}

td {
  border: 1px solid black;
  text-align: center;
  padding: 10px;
}

tr:nth-child(even) {
  background-color: #00cf45;
}

@media screen and (max-width:1440px) {
  .div2 {
    width: 10%;
    margin-left: 20px;
  }
}

@media screen and (max-width:1440px) {
  .div2 {
    width: 9%;
    margin-left: 20px;
  }
}

@media screen and (max-width:1440px) {
  .div3 {
    width: 10%;
    margin-left: 20px;
  }
}

<div class="">
  <div class="div1" style="width:150px;display:inline-flex;"><input type="text" id="fname" name="fname" placeholder="Text"> </div>
  <div class="div2" style="width:120px;display:inline-flex;">
    <select style="width:120px;" id="cars" name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>
  <div class="div3" style="width:120px;display:inline-flex;"><input type="text" id="fname" name="fname" placeholder="Text"> </div>
  <div class="div4" style="width:150px;display:inline-flex;">
    <select style="width:120px;" id="cars" name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </div>
  <div class="div5" style="width:150px;display:inline-flex;"><input type="text" id="fname" name="fname" placeholder="Text"> </div>
</div>
<table>

  <tr>
    <td style="width:15%">
      Width of this column remains same on varying screen-size
    </td>
    <td style="width:10%">
      Width of this column changes on varying screen-size
    </td>
    <td style="width:9%">
      Width of this column also changes on varying screen-size
    </td>
    <td style="width:10%">
      Width of this column also changes on varying screen-size
    </td>
    <td style="width:56%">
      Width of this column also changes on varying screen-size
    </td>
  </tr>
  <tr>
    <td style="width:15%">
      Width of this column remains same on varying screen-size
    </td>
    <td style="width:10%">
      Width of this column changes on varying screen-size
    </td>
    <td style="width:9%">
      Width of this column also changes on varying screen-size
    </td>
    <td style="width:10%">
      Width of this column also changes on varying screen-size
    </td>
    <td style="width:56%">
      Width of this column also changes on varying screen-size
    </td>
  </tr>
  <tr>
    <td style="width:15%">
      Width of this column remains same on varying screen-size
    </td>
    <td style="width:10%">
      Width of this column changes on varying screen-size
    </td>
    <td style="width:9%">
      Width of this column also changes on varying screen-size
    </td>
    <td style="width:10%">
      Width of this column also changes on varying screen-size
    </td>
    <td style="width:56%">
      Width of this column also changes on varying screen-size
    </td>
  </tr>
  <tr>
    <td style="width:15%">
      Width of this column remains same on varying screen-size
    </td>
    <td style="width:10%">
      Width of this column changes on varying screen-size
    </td>
    <td style="width:9%">
      Width of this column also changes on varying screen-size
    </td>
    <td style="width:10%">
      Width of this column also changes on varying screen-size
    </td>
    <td style="width:56%">
      Width of this column also changes on varying screen-size
    </td>
  </tr>
</table>

这是我的小提琴：

https://jsfiddle.net/y2v1waso/

标签： htmljquerycss