在弹出表中滚动 tr/element
Posted
技术标签:
【中文标题】在弹出表中滚动 tr/element【英文标题】:Scrolling a tr/element inside a popup table 【发布时间】:2019-09-06 18:25:18 【问题描述】:我正在更新一个很老的网站的样式,我无法更改服务器代码(只有样式)。
我的问题是我有一个 div 弹出窗口,其中包含一个表,该表在 div 之外(在 y 中)溢出,因为一个 tr 非常长。
我无法在 div 容器上设置溢出,因为我需要查看顶部和底部(非常老的 html 设计,第一个 tr 是顶部栏,最后一个 tr 是底部栏)。这是需要滚动的第二个(中间)tr(或内部内容)。
我没有找到适合我的问题的答案。
我尝试使用不同类型的显示,例如block
,但我真的无法获得好东西。例如,看起来不错,但底部 tr 完全位于页面底部,而中间 tr 被剪切且可滚动。
我对 css 不同类型的显示并没有真正的经验,所以我尝试在 w3schools 上阅读并使用一些,但效果并不好。
这是一个 JSfiddle http://jsfiddle.net/ex8h2Lgm/
<div id="popup">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr class="border" id="top">
<td colspan="5">popup</td> <!-- normally 5 td, but not relevant-->
</tr><tr id="middle">
<td class="border" id="left"></td>
<td id="center" colspan="3">
<div>
<div id="1" class="content">Content 1 <br> Content 1 <br> Content 1 <br> Content 1 <br> Content 1 <br> Content 1 <br> Content 1 <br> Content 1 <br> Content 1 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2</div>
<div class="content" id="2">Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2 <br> Content 2</div>
<div id="3" class="content">Content 3 <br> Content 3 <br> Content 3 <br> Content 3 <br> Content 3 <br> Content 3 <br> Content 3 <br> Content 3</div>
</div>
</td>
<td class="border" id="right"></td>
</tr>
<tr class="border" id="bottom">
<td colspan="5"></td>
</tr>
</tbody>
</table>
</div>
<style type="text/css">
.content
width: 100%;
height: 100%;
#\31
background-color: blue;
#\32
background-color: red;
#\33
background-color: green;
/* #right */
.border
background-color: grey;
#popup
position: absolute;
top: 5%;
left: 25%;
width: 50%;
height: 50%;
table
width: 100%;
height: 100%;
#top, #bottom
height: 20px;
#left, #right
#center
width: 100%;
width: 100%;
height: 100%;
#\31
background-color: blue;
</style>
如上所述,我希望表格与 div 大小相同,只有中间 tr 可滚动,因此顶部/底部 tr 不滚动。
【问题讨论】:
【参考方案1】:编写更少的代码以获得更好的性能,这将适用于所有浏览器。
table, tbody, #center
display: grid;
#middle
width:100%;
height: 100px;
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
【讨论】:
您的解决方案和上面的解决方案都很好,感谢您的帮助。但是,我必须选择一个,虽然你的很好,但强制使用固定尺寸的高度有点困扰我(使用百分比尺寸需要更多的样式来移动底部 tr)所以我选择了另一个。再次感谢【参考方案2】:因为它仅限于更改 HTML 结构。这里很有挑战性。
我选择了从浏览器覆盖 HTML 标签的默认样式的方法,甚至是一些不应被覆盖的原生标签(您必须在每个支持的浏览器中非常仔细地测试这一点,因为每个浏览器都有不同的默认样式)
这是我添加的样式。我不确定它是否适用于您的弹出窗口,但我希望您能理解
table
display: block;
tbody
display: flex;
flex-direction: column;
height: 100%;
#middle
overflow-y: scroll;
display: block;
width: 100%;
#center
display: block;
http://jsfiddle.net/krugtep/ufydepro/3/
【讨论】:
以上是关于在弹出表中滚动 tr/element的主要内容,如果未能解决你的问题,请参考以下文章