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

Question

我正在构建一个有很多表格的应用程序。有些水平长，所以我想要添加水平滚动，如果他们扩展到页面之外。

我用Google搜索周围的解决方案，它们都指向在桌子上使用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，但用户将使用所见即所得的编辑器，使表，因此多数民众赞成它会在应用程序中。

Answer 1

使用容器<div>包表和申请overflow属性为股利。

.container{ 
 
    display:block; 
 
    overflow-x: auto; 
 
}

<div class="container"> 
 
<table style="width: 100%;" border="1"> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th style="text-align: center;">head</th> 
 
\t \t \t <th style="text-align: center;">head</th> 
 
\t \t \t <th style="text-align: center;">head</th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td style="width: 33.3333%; text-align: center;">text</td> 
 
\t \t \t <td style="width: 33.3333%; text-align: center;">text</td> 
 
\t \t \t <td style="width: 33.3333%; text-align: center;">text</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table> 
 
</div> 
 

 
<br/><br/> 
 

 
<div class="container"> 
 
<table style="width: 100%;" border="1"> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th style="text-align: center;">head</th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table> 
 
</div> 
 
<br/><br/> 
 
<div class="container"> 
 
<table style="width: 100%;" border="1"> 
 
\t <thead> 
 
\t \t <tr> 
 
\t \t \t <th style="text-align: center;">head</th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t \t <th style="text-align: center;">head 
 
\t \t \t \t <br> 
 
\t \t \t </th> 
 
\t \t </tr> 
 
\t </thead> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 14.2857%; text-align: center;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <br> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table> 
 
</div>