个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在构建一个包含大量表格的应用程序。有些在水平方向上很长，所以如果它们延伸到页面之外，我想为它们添加水平滚动。
我在谷歌上搜索了一个解决方案，他们都指向使用 display: block; overflow-x: auto; 在 table 上。这适用于比屏幕宽的表格，但现在表格被设置为 display:block; 而不是默认的 display: table; 表格单元格都被压在一起并且表格不会保持其自然的 100% 宽度，这使得不比屏幕宽的表格看起来很糟糕并且被压在页面的左侧。
似乎我既可以让列数较少的表看起来不错，也可以让列数很多的表不在页面上，或者列数较少的表看起来很糟糕，而列数很多的表很好且响应迅速。但似乎没有同时适用于两者的解决方案。
表格是用户生成的，所以我无法自己手动为每个表格设置 css。
那么有没有一种方法可以让 display: table 真正地保持在一个表格上，这样它的行为就像一个表格，并且如果表格比页面宽，它可以水平滚动？
更新:
JS fiddle :
With display: block; overflow-x: auto
Without display: block; overflow-x: auto
抱歉，CSS 在 html 中，但用户将使用所见即所得的编辑器来制作表格，这就是它在应用程序中的方式。
最佳答案
使用容器 <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>关于html - 如何在不使用显示 : block; overflow-x: auto? 的情况下创建水平滚动表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39824031/
25
4
0
我是 Java 新手，这是我的代码， if( a.name == b.name && a.displayname == b.displayname && a.linknam
在下面的场景中，我有一个 bool 值。根据结果，我调用完全相同的函数，唯一的区别是参数的数量。 var myBoolean = ... if (myBoolean) { retrieve
我是一名研究 C++ 的 C 开发人员: 我是否正确理解如果我抛出异常然后堆栈将展开直到找到第一个异常处理程序？是否可以在不展开的情况下在任何 throw 上打开调试器(即不离开声明它的范围或任何更高
在修复庞大代码库中的错误时，我观察到一个奇怪的情况，其中引用的动态类型从原始 Derived 类型更改为 Base 类型!我提供了最少的代码来解释问题: struct Base { // some
我正在尝试用 C# 扩展给定的代码，但由于缺乏编程经验，我有点陷入困境。 使用 Visual Studio 社区，我尝试通过控制台读出 CPU 核心温度。该代码使用开关/外壳来查找传感器的特定名称(即
这可能是一个哲学问题。 假设您正在向页面发出 AJAX 请求(这是使用 Prototype): new Ajax.Request('target.asp', { method:"post", pa
我有以下 HTML 代码，我无法在所有浏览器中正常工作: 我试图在移动到
我对 Swift 很陌生。我如何从 addPin 函数中检索注释并能够在我的 addLocation 操作 (buttonPressed) 中使用它。我正在尝试使用压力触摸在 map 上添加图钉，在两
我设置了一个详细 View ，我是否有几个 Nib 文件根据在 Root View Controller 的表中选择的项目来加载。 我发现，对于 Nibs 的类，永远不会调用 viewDidUnloa
我需要动态访问 json 文件并使用以下代码。在本例中，“bpicsel”和“temp”是变量。最终结果类似于“data[0].extit1” var title="data["+bpicsel+"]
我需要使用第三方 WCF 服务。我已经在我的证书存储中配置了所需的证书，但是在调用 WCF 服务时出现以下异常。 向 https://XXXX.com/AHSharedServices/Custome
在几个 SO 答案(1、2)中，建议如果存在冲突则不应触发 INSERT 触发器，ON CONFLICT DO NOTHING 在触发语句中。也许我理解错了，但在我的实验中似乎并非如此。 这是我的 S
如果进行修改，则会给出org.hibernate.NonUniqueObjectException。在我的 BidderBO 类(class)中 @Override @Transactional(pr
我使用 indexOf() 方法来精细地查找数组中的对象。 直到此刻我查了一些资料，发现代码应该无法正常工作。 我在reducer中尝试了上面的代码，它成功了 let tmp = state.find
假设我有以下表格: CREATE TABLE Game ( GameID INT UNSIGNED NOT NULL, GameType TINYINT UNSIGNED NOT NU
代码: Alamofire.request(URL(string: imageUrl)!).downloadProgress(closure: { (progress) in
我是一名优秀的程序员,十分优秀！