logo标签列表

如何创建一个水平滚动的表格，而不使用display: block; overflow-x: auto？

htmlcsshtml-table
3
我正在开发一个有很多表格的应用程序。其中一些表格水平很长，因此如果它们超出页面范围，我想为它们添加水平滚动。
我在谷歌上搜索了解决方法，它们都指向在表格上使用display: block; overflow-x: auto;。这适用于比屏幕更宽的表格，但现在由于表格设置为display:block;而不是默认的display: table;，表格单元格都被挤在一起，表格没有保持其自然的100%宽度，这使得那些不比屏幕更宽的表格看起来非常糟糕，被挤压在页面左侧。
看起来我要么可以让列较少的表格好看，让列很多的表格超出页面，要么让列较少的表格看起来不好，让列很多的表格漂亮且响应灵敏。但似乎没有同时解决两个问题的方法。
这些表格是由用户生成的，所以我不能手动为每个表格设置CSS。
那么有没有一种方法可以将display: table保留在表格上，使其像表格一样运行，并在其宽度超过页面时水平滚动呢？
更新：
JS fiddles:
带有"display: block; overflow-x: auto"的

不带有"display: block; overflow-x: auto"的

抱歉，CSS在HTML中，但用户将使用所见即所得编辑器制作表格，因此这就是应用程序的方式。
你能分享一些代码吗？我无法重现你的问题。 - Chathura Buddhika
@ChathuraBuddhika 我在问题中添加了2个JS Fiddles。 - Rob
1个回答
5
使用容器<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>

这是一个好主意，但在我运行你的代码片段时，它不能像你的代码那样正常工作。你的代码使顶部表格保持在原位，滚动条似乎只是移动表格内容。但我的代码中它会移动div中的所有内容。https://jsfiddle.net/zv65jazd/ - Rob
它在jsfiddle上无法工作。这是jsfiddle的问题。尝试将该代码复制到一个HTML文件中并运行。它应该能正常工作。 - Chathura Buddhika
1
我按照你的要求更新了代码。即使在 jsfiddle 上也可以完美运行。https://jsfiddle.net/zb3m37vw/ 你应该为每个表格单独添加容器 div。 - Chathura Buddhika
1
不幸的是，那个修复方法在我的情况下不起作用。这些表格是由用户在所见即所得编辑器中创建的。我无法为每个单独的表格包装一个 div。 - Rob
1
最终使用了猴子补丁技术来在所见即所得编辑器中添加 div 元素以围绕表格。看起来这样做很有效，谢谢。 - Rob
显示剩余4条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接