调整窗口大小时动态'inline-block'宽度

Question

我把几个表(display: inline-block &固定列宽:140px)并排，间隔100px
►CodePen/原始代码

当我调整窗口的宽度时，我希望这些边距减少，这样行就不会太快折叠。我确实找到了一种方法，但它很粗糙，我真的不喜欢这个解决方案。
CodePen/Hacky解决方案

为例:

<div class="tab_centre" style="font-size: 0px;">
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 3a</th><th class="etat0">Env 3b</th></tr></thead><tbody><tr><td>v1.2</td><td>v1.2</td></tr></tbody></table>
<div style="display: inline-block; max-width: 100px; width: calc(100vw - 840px - 135px);"></div>
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 4a</th><th class="etat0">Env 4b</th></tr></thead><tbody><tr><td>v1.2</td><td>v1.2</td></tr></tbody></table>
<div style="display: inline-block; max-width: 100px; width: calc(100vw - 840px - 135px);"></div>
<table style="font-size: 12px;"><thead><tr><th class="etat0">Env 5a</th><th class="etat0">Env 5b</th></tr></thead><tbody><tr><td>v1.1+</td><td>v1.1+</td></tr></tbody></table>
</div>

是否有避免max-width: 100px; width: calc(100vw - 840px - 135px);的方法?

Answer 1

你应该用百分比而不是px来表示边距。

margin-right: 2%;