在弹出表中滚动 tr/element答案

【问题标题】：Scrolling a tr/element inside a popup table在弹出表中滚动 tr/element
【发布时间】：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 不滚动。

【问题讨论】：

标签： css html-table overflow responsive

【解决方案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/

【讨论】：