css - Firefox 如何在单元格表格内显示滚动条?

标签 css firefox scrollbar tablehtml

这是最简单的代码,仍然突出了 Firefox 的行为(在 Chrome 和 IE 中,滚动条按预期显示)

<html>
<body>
<table style="width:100%; height:100%;">
   <tbody>
       <tr>
           <td           style=" width: 75%;  height: 100%; vertical-align: top; background-color: #FFE4C4;">
               <div      style=" width: 100%; height: 100%; overflow: auto;">
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
                    <div> 1   __________________  line </div>
               </div>
           </td>

           <td style="background-color: #DEB887;"> <div> . </div>   </td>
       </tr>

   </tbody>
</table>
</body>
</html>

有任何提示让它即使在 FF 中也能正常工作吗?非常感谢

最佳答案

您使用的结构不符合您的要求。表格和表格单元格的主要功能是根据内容进行扩展,因此最好为此使用不同的布局样式,例如高度为 100% 的相对父项和其中绝对定位的子项100% 高度和 overflow:auto

这就是说,您要实现的目标如下:

a) 首先添加html, body到height:100% b) 对表格使用table-layout:fixed c) 使用 height:100% 到 tr d) 在 td 中使用 display:inline-block div(这是为了 ie 工作) e) 使用带有 overflow:auto 的绝对定位元素。

这是一个有效的 fiddle : https://jsfiddle.net/Ls6go1g4/

关于css - Firefox 如何在单元格表格内显示滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40004335/

相关文章:

jquery - webkit 滚动条使用 jQuery.css() 方法

jquery - 有没有办法使用 jQuery 选择浏览器的滚动条?

html - 使用 CSS 动画上下滑动

css - 我怎样才能将我的布局链接到我在资源/ View /上的 Assets ?

css - 相当于 FF 和 IE 的 -webkit-text-stroke

Firefox 31.1.0 无法播放某些 H.264 视频

html - Favicons 拒绝在 IE 和 Chrome 中显示

javascript - 如何使用 JavaScript 和 CSS 获得基于 div 的下拉菜单以获得滚动条而不是延伸到屏幕末尾? Struts也参与其中

css - 用IE居中DIV

c++ - 添加水平滚动条到控制台