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

Question

I'm building an app that has a lot of tables. Some are horizontally long so I want to add horizontal scrolling to them if they extent outside of the page.

I googled around for a solution and they all point to using display: block; overflow-x: auto; display: block; overflow-x: auto; on the table. This works for tables wider than the screen but now that tables are set as display:block; instead of the default display: table; the table cells are all squished together and the table doesn't maintain its natural 100% width which makes tables that aren't wider than the screen took horrible and squished to the left of the page.

It seems like I can either have tables with less columns look good and have tables with lots of columns go off the page, or have tables with less columns look bad and tables with lots of columns nice and responsive. But there doesn't seem to be a solution for both.

The tables are user generated so I cant manually set the css for each table myself.

So is there a way to actaully keep display: table on a table so it behaves like a table and have the table scroll horizontally if its wider than the page?

Update:

JS fiddles:

With display: block; overflow-x: auto

Without display: block; overflow-x: auto

Sorry the CSS is in the html but users will be using WYSIWYG editors to make the tables so thats the way it will be in the app.

Answer 1

Use container <div> to wrap tables and apply overflow property for that 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>