Прокрутка элемента tr / внутри всплывающей таблицы

Question

Я обновляю стиль очень старого веб-сайта и не могу изменить код сервера (только стиль).

Моя проблема здесь в том, что у меня есть всплывающее окно div, содержащее таблицу, которая переполняется (в y) за пределами div из-за одного tr, который очень длинный.

Я не могу установить переполнение для контейнера div, потому что мне нужно увидеть верх и низ (действительно старый html-дизайн, где первый 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

Напишите меньше кода для лучшей производительности, это будет работать во всех браузерах.

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

Answer 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/