html - div内的表格填充

我有类似以下内容：

.vili_horizontal_scroll_auto{
    width: auto;
    border: solid 1px #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.vili_table_padding{
    padding-left: 20px;
    padding-right: 20px;
}

table.vili_wide_table {
  width: 1000px;
}

table {
  background-color: coral;
}

<div class="vili_horizontal_scroll_auto vili_table_padding">
  <table class="vili_wide_table">
    <tr><td>this should have whitespace on left and right</td></tr>
  </table>
</div>

<div class="vili_horizontal_scroll_auto vili_table_padding">
  <table>
    <tr><td>this should have whitespace on left and right</td></tr>
    <tr><td>something very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td></tr>
  </table>
</div>

问题是表格已正确移入左侧的空白区域，但是即使滚动到最右侧后，表格仍会触摸右侧的屏幕。

我如何解决它，以便表格与屏幕末端分开。

注意：桌子很宽，因此几乎总是比屏幕宽。

谢谢

最佳答案

更改您的宽度，它会溢出视口。下面的“ 100％”有效，但是我不确定它是否可以满足您的需求，但是您的问题基本上是width:1000px;

.vili_horizontal_scroll_auto{
    width: auto;
    border: solid 1px #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.vili_table_padding{
    padding-left: 20px;
    padding-right: 20px;
}

table {
  width: 100%;
  background-color: coral
}

<div class="vili_horizontal_scroll_auto vili_table_padding">
  <table>
    <tr><td>this should have whitespace on left and right</td></tr>
  </table>
</div>

关于html - div内的表格填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39129627/