在div

时间:2016-08-24 17:31:14

标签: html css

我有以下内容:



.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>
&#13;
&#13;
&#13;

问题是桌子被正确地移动到左手侧的白色空间,但是即使滚动到最右边,它仍然会触摸右侧的屏幕。

如何修复它以使表格与屏幕结束分开。

注意:桌子很宽,所以它几乎总是比屏幕宽。

谢谢

1 个答案:

答案 0 :(得分:-1)

更改宽度,视口溢出。 &#39; 100%&#39;以下工作,但我不确定它是否能满足您的需求,但您的问题基本上是width:1000px;

&#13;
&#13;
.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
}
&#13;
<div class="vili_horizontal_scroll_auto vili_table_padding">
  <table>
    <tr><td>this should have whitespace on left and right</td></tr>
  </table>
</div>
&#13;
&#13;
&#13;