Динамическая ширина «inline-block» при изменении размера окна

Question

Я поместил несколько таблиц (display: inline-block & фиксированной ширины столбца: 140 пикселей) рядом друг с другом с шагом в 100 пикселей.
CodePen/Original code

Я хочу, чтобы эти поля уменьшались при изменении размера окна, чтобы линия не рушилась слишком быстро. Я нашел способ сделать это, но он взломан, и мне не очень нравится это решение.
► CodePen/Hacky solution

Exemple:

<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);? Значения, вставленные в «calc», являются хитами и пропущенными.

Answer 1

Вы должны указать маржу в процентах вместо px.

margin-right: 2%;