最大寬度和最小寬度縮放，這可能嗎？

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>