如何在不使用 display: block 的情况下创建水平滚动表；溢出-x：自动？

Question

我正在构建一个有很多表的应用程序。有些是水平长的，所以如果它们超出页面范围，我想为它们添加水平滚动。

我四处寻找解决方案，他们都指出display: block; overflow-x: auto;在桌子上使用。这适用于比屏幕更宽的表格，但现在表格被设置为display:block;而不是默认display: table;表格单元格都被挤压在一起并且表格不会保持其自然的 100% 宽度，这使得表格不比屏幕宽可怕的，被压在页面的左边。

似乎我可以让列数较少的表格看起来不错，而列数较多的表格会离开页面，或者列数较少的表格看起来很糟糕，而列数较多的表格很好且响应迅速。但两者似乎都没有解决方案。

这些表格是用户生成的，所以我不能自己为每个表格手动设置 css。

那么有没有一种方法可以实际保留display: table在桌子上，使其表现得像一张桌子，并且如果桌子比页面宽，则让桌子水平滚动？

更新：

JS小提琴：

带显示：块；溢出-x：自动

无显示：块；溢出-x：自动

抱歉，CSS 在 html 中，但用户将使用 WYSIWYG 编辑器来制作表格，这就是它在应用程序中的方式。

Answer 1

使用容器<div>包装表格并为该 div 应用溢出属性。

.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>