Блог

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

Моя проблема здесь в том, что у меня есть всплывающее окно div, содержащее таблицу, которая переполняется (в 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%;
}

#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 не прокручиваются.

Поскольку изменение структуры 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/

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

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