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

我想做什么

我得到了一个有3列的表：

• 文本内容
• 输入内容
• 间隔棒

文本和输入必须最大为200px，最小为100px

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

我只希望当屏幕小于400px时，它们的比例更小

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

如何做到这一点

我试过了，但它似乎忽略了表和div的min/max

<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）

试试这个：

表格{
宽度：100%；
边框：1px纯绿色；
}
.文本{
背景：黄色；
}
.输入{
背景：粉红色；
}
.文本，
.输入{
宽度：100px；
}
.垫片{
背景：橙色；
显示：无；
}
@介质（最小宽度：400px）{
.文本，
.输入{
宽度：200px；
}
.垫片{
显示：表格单元格；
宽度：计算（100%-400px）；
}
}

1.
2.
3.

试试这个：

表格{
宽度：100%；
边框：1px纯绿色；
}
.文本{
背景：黄色；
}
.输入{
背景：粉红色；
}
.文本，
.输入{
宽度：100px；
}
.垫片{
背景：橙色；
显示：无；
}
@介质（最小宽度：400px）{
.文本，
.输入{
宽度：200px；
}
.垫片{
显示：表格单元格；
宽度：计算（100%-400px）；
}
}

1.
2.
3.

听起来像是flexbox的一个例子。不是一个表格。我看了一些flexbox的例子，它看起来不是很灵敏。你有一些反应灵敏的例子吗？Flexbox完全是反应灵敏的。我相信还是你能证明：-）如果你看过演示，你一定看到了，它是为反应灵敏而设计的。听起来像是Flexbox的一个案例。不是一张表。我看了一些Flexbox的例子，它看起来反应不太灵敏。你有一些反应灵敏的例子吗？Flexbox完全是反应灵敏的。我相信还是你能证明：-）如果你看过演示，你一定已经看到了，它是为反应灵敏而设计的。这非常有效！！！非常感谢尤根茨！！！这正是我所寻找的，它适合我所有的代码。根据IE9以来支持它的说法。Eugen，我所要做的就是将你的间隔类添加到我的表中，我现在可以让它们变得非常酷：-）看看吧@torbenrudgaard我很高兴能帮助你！：）这真是太好了！！！非常感谢尤根茨！！！这正是我所寻找的，它适合我所有的代码。根据IE9以来支持它的说法。Eugen，我所要做的就是将你的间隔类添加到我的表中，我现在可以让它们变得非常酷：-）看看吧@torbenrudgaard我很高兴能帮助你！：）