我正在构建一个包含大量表格的应用。有些是横向长的，所以如果它们扩展到页面之外，我想向它们添加水平滚动。
我搜索了一个解决方案，他们都指向在桌面上使用display: block; overflow-x: auto;。这适用于比屏幕宽的表，但现在表被设置为display:block;而不是默认的display: table;表格单元格都被挤压在一起而且表格不能保持其自然的100％宽度，这使得不宽于屏幕的桌子变得非常糟糕，并且在页面左侧压扁。
看起来我可以拥有较少列的表看起来很好，并且页面上有很多列，或者列表较少的表看起来很糟糕，而且有很多列的表很好且响应很快。但似乎两者都没有解决方案。
这些表是用户生成的，所以我不能自己手动为每个表设置css。
那么有没有一种方法可以将display: table保存在一个表上，使其表现得像一个表，如果它比页面宽，那么表格会水平滚动吗？
更新
JS小提琴：
With display: block; overflow-x: auto
Without display: block; overflow-x: auto
很抱歉CSS在html中，但是用户将使用WYSIWYG编辑器来制作表格，使其与应用程序一样。
答案 0 :(得分：2)
使用容器<div>来包装表并为该div应用overflow属性。
.container{
display:block;
overflow-x: auto;
}<div class="container">
<table style="width: 100%;" border="1">
<thead>
<tr>
<th style="text-align: center;">head</th>
<th style="text-align: center;">head</th>
<th style="text-align: center;">head</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 33.3333%; text-align: center;">text</td>
<td style="width: 33.3333%; text-align: center;">text</td>
<td style="width: 33.3333%; text-align: center;">text</td>
</tr>
</tbody>
</table>
</div>
<br/><br/>
<div class="container">
<table style="width: 100%;" border="1">
<thead>
<tr>
<th style="text-align: center;">head</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-beerus"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45152-v1474530116-dragon-ball-z-dokkan-battle-awakening-medals-bog-beerus-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-goten"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45176-v1474530282-dragon-ball-z-dokkan-battle-awakening-medals-bog-goten-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-trunks"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45184-v1474530347-dragon-ball-z-dokkan-battle-awakening-medals-bog-trunks-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-ultimate-gohan"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45168-v1474530235-dragon-ball-z-dokkan-battle-awakening-medals-bog-ultimate-gohan-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-vegeta"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45192-v1474530403-dragon-ball-z-dokkan-battle-awakening-medals-bog-vegeta-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-videl"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45200-v1474530470-dragon-ball-z-dokkan-battle-awakening-medals-bog-videl-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-whis"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45160-v1474530187-dragon-ball-z-dokkan-battle-awakening-medals-bog-whis-image.png" style="width: 70px;"></a>
<br>
</td>
</tr>
</tbody>
</table>
</div>
<br/><br/>
<div class="container">
<table style="width: 100%;" border="1">
<thead>
<tr>
<th style="text-align: center;">head</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
<th style="text-align: center;">head
<br>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-beerus"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45152-v1474530116-dragon-ball-z-dokkan-battle-awakening-medals-bog-beerus-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-goten"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45176-v1474530282-dragon-ball-z-dokkan-battle-awakening-medals-bog-goten-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-trunks"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45184-v1474530347-dragon-ball-z-dokkan-battle-awakening-medals-bog-trunks-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-ultimate-gohan"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45168-v1474530235-dragon-ball-z-dokkan-battle-awakening-medals-bog-ultimate-gohan-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-vegeta"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45192-v1474530403-dragon-ball-z-dokkan-battle-awakening-medals-bog-vegeta-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-videl"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45200-v1474530470-dragon-ball-z-dokkan-battle-awakening-medals-bog-videl-image.png" style="width: 70px;"></a>
<br>
</td>
<td style="width: 14.2857%; text-align: center;">
<a href="https://guidir.com/guides/dragon-ball-z-dokkan-battle/awakening-medals/bog-whis"><img class="fr-dib fr-draggable" src="https://commondatastorage.googleapis.com/guidir/item-value-images/thumb_45160-v1474530187-dragon-ball-z-dokkan-battle-awakening-medals-bog-whis-image.png" style="width: 70px;"></a>
<br>
</td>
</tr>
</tbody>
</table>
</div>