个人中心
文章发布
退出
作者热门文章
- 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
我正在使用 bootstraptable 并试图让单元格显示溢出的内容但只显示向下(即 overflow-y)。问题是，bootstraptable css 使用 overflow: hidden o
来自文档:溢出: The overflow shorthand CSS property sets what to do when an element's content is too big to
有多个这样命名的问题，但我没有找到一个适用于我的情况，所以我在这里: 在这段代码中: #container:hover { overflow-x: hidden; } #container {
我正在学习 Haskell，但遇到了我没想到的异常“堆栈溢出”。 代码相当简单: type Reals = Double prod :: Reals -> Reals -> Reals prod a
我通读了this question并且没有看到我的问题是否有解决方案。 我创建了一个 CodePen这表明了这个问题。我希望隐藏红色边框左侧和右侧 (overflow-x) 的所有内容，但保持顶部和底
我有一张 bootstrap 4 卡，我想在其中隐藏字幕的溢出(并显示“...”)。我怎样才能实现这个目标？如果可能的话使用纯引导代码... Test object Added by
我今天更新了我的 flutter ，现在堆栈小部件中的溢出参数不再有效。 Flutter 1.22.0-10.0.pre.252 • channel master • https://github.c
使用 border-radius Opera 实际上不会隐藏元素的溢出部分。我已经尝试应用我设法在类似线程中找到的东西，例如定义边框样式或注意使用绝对和相对参数进行定位。但它仍然无法正常工作。 htm
我在固定大小的 div 中有一个表。如果表格溢出 div，我希望滚动条出现。我还想在向下滚动时克隆表格的标题，以便标题持久存在。我遇到的问题是我希望水平滚动条滚动克隆的标题和原始表格，而垂直滚动条
奇怪，我以为 overflow-x 和 overflow-y 都被广泛支持，但后来我才看到它只支持 CSS3( http://reference.sitepoint.com/css/overflow
unsigned long long terms; unsigned long long test; unsigned long long digit = 1; unsigned long long
我有一个案例，我必须使用 overflow-x:scroll; 水平显示内容。 现在在这个Fiddle第一个 block 有 overflow-y:scroll; 提供滚动，用户可以滚动内容。在第二个
您好，我正在尝试只使用 overflow-x 而不是 overflow-y 结构是这样的 Head1 feild1
我有一个正在运行的计划作业，我想计算过去 30 天的时间。为此，我收到一条警告，表示在表达式中检测到数字溢出。我怎样才能安全地给予 30 天？ @Override @Scheduled(cro
我有一个父级，它有多个子级，当父级宽度溢出时，我喜欢显示水平滚动条。 我不想使用“display:inline-block”属性，因为它们之间会产生空白。 这是我的尝试: .parent{ wid
我正在为导航栏编写一些 CSS，我需要为下拉菜单使用 max-height 和 overflow-y: scroll 以便确保它适合页面。但是，每当我将 overflow-y 属性设置为滚动时，它似乎
这是我的问题。我有一个旋转木马，它也像菜单一样。当选项卡的数量高于浏览器可用的宽度空间时，将出现轮播控件。一切正常。但我还在每个选项卡上添加了一个下拉菜单，这就是问题所在。如果我设置 overflow
这个问题在这里已经有了答案: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue (10 个答案) 关
这个问题在这里已经有了答案: How do you keep parents of floated elements from collapsing? [duplicate] (15 个答案) W
这是一个代码片段: div.one { width: 98%; border: 5px solid black; overflow-x: visible; overflow-y: hi
我是一名优秀的程序员,十分优秀！