我有如下内容:
.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>
问题是表格已正确移动到左侧的空白区域,但即使滚动到最右侧,它仍然会触及右侧的屏幕。
如何修复它,使表格与屏幕端分开。
注意:表格非常宽,所以它几乎总是比屏幕宽。
谢谢
最佳答案
改变你的宽度,它会溢出视口(viewport)。下面的“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/