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

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>