在弹出窗口 table 内滚动 tr/element

Question

我正在更新一个非常旧的网站的样式，我无法更改服务器代码（只能更改样式）。

我的问题是我有一个 div 弹出窗口，其中包含一个 table 溢出（在 y 中）在 div 之外，因为一个 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%;
}

#  {
  background-color: blue;
}

#  {
  background-color: red;
}

#  {
  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%;
}

#  {
  background-color: blue;
}
</style>

如上所述，我希望 table 与 div 大小相同，只有中间的 tr 可滚动，因此 top/bottom tr 不滚动。

Answer 1

因为它被限制改变 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/

Answer 2

编写更少的代码以获得更好的性能这将适用于所有浏览器。

table, tbody, #center {
     display: grid;
}
#middle {
    width:100%;
    height: 100px;
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

在弹出窗口 table 内滚动 tr/element

Scrolling a tr/element inside a popup table

css

html-table

overflow

responsive