我将几个表格(display: inline-block
& fixed column width: 140px)并排放置,并以 100px 的边距分隔。
► CodePen / Original code
我希望在调整窗口宽度时减少这些边距,以免线条折叠得太快。我确实找到了一种方法来做到这一点,但它很老套,我不太喜欢这个解决方案。
► CodePen / Hacky solution
示例:
<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;宽度:计算(100vw - 840px - 135px);
?
插入“计算”中的值是偶然的。
最佳答案
您应该以百分比而不是 px 的形式给出边距。
margin-right: 2%;
关于css - 调整窗口大小时动态宽度为 'inline-block',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39038050/