最大宽度和最小宽度缩放，这可能吗？

Question

我想做的事

我有一个包含 3 列的表格：

• 文字内容
• 输入内容
• 垫片

文本和输入必须最大 200 像素和最小 100 像素

我希望它们是 200px---200px---????px（屏幕宽度的其余部分）

我只希望它们在屏幕小于 400 像素时缩小

然后它们应该很好地缩小到 100px--100px--0px

如何做到这一点？

我试过了，但它似乎忽略了表格和 div 的最小值/最大值。

<table style="width:100%;" border="1">
  <tr>
    <td style="">
      <div style="width:10%; min-width:100px; max-width:200px; width:auto;">
        The text goes here
      </div>
    </td>
    <td style="">
      <input style="width:10%; min-width:100px; max-width:200px; width:auto;" 
             type="text" value="field is here">
    </td>
    <td style="width:80%;"></td>
  </tr>
</table>

（我使用内联样式是因为它在测试时速度更快，一旦生效就会放入 CSS）

Answer 1

试试这个：

table {
    width: 100%;
    border: 1px solid green;
  }

  .text {
    background: yellow;
  }

  .input {
    background: pink;
  }

  .text,
  .input {
    width: 100px;
  }
  .spacer {
    background: orange;
    display: none;
  }

  @media (min-width: 400px) {
    .text,
    .input {
      width: 200px;
    }

    .spacer {
      display: table-cell;
      width: calc(100% - 400px);
    }
  }

<table border="0">
  <tr>
    <td class="text">1</td>
    <td class="input">2</td>
    <td class="spacer">3</td>
  </tr>
</table>