Question

我正在更新一个非常老的网站的样式，并且无法更改服务器代码（仅样式）。

我的问题是我有一个div弹出窗口，其中包含一个表，该表由于一个tr太长而在div之外溢出（在y中）。

我无法在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不会滚动。

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 */
}

在弹出表中滚动tr / element

2 个答案: