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

Question

我想做什么

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

• 文字内容
• 输入内容
• 间隔

文字和输入必须是最大200px和最小100px

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

我只希望它们在屏幕小于400px

时缩小

然后他们应该很好地缩小，直到100px - 100px - 0px

如何做到这一点？

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

res task http

（我使用内联样式，因为它在测试时更快，一旦有效就会放入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>