null

Адаптивная таблица за счет скрола

Всем добра, не давно на работе пришлось переносить весьма старый сайт со всем его содержимым с Joomla 1,5 (одно слово Joomla у меня давно вызывает дрожжжжжж и нервный тик) на WordPress 4.9.3. Учитывая что весь контент наполнялся девушкой которая переносила таблицы на страницы старой версии сайта копипастом из Word документов, мне пришлось весьма нелегко с переносом этих самых злосчастных таблиц. К тому же я решил не облегчать свои страдания простым переносом уже не правильных по своей верстке таблиц, а немного утяжелил данный процесс дополнительной оберткой тела

 (<tbody>...</tbody>)

таблицы для того чтобы верстка страницы не плыла при наличии таблиц (из верда) в содержимом страницы. Используемый мной метод оказался весьма продуктивным, так как при использовании таблиц данным методом, можно быть уверенным что при изменении ширины экрана таблица не вылезет за рамки страницы, а скроет свое содержимое, отобразив скролл, который пользователю останется протянуть для того что б увидеть скрытые ячейки.

Пример таблицы:

<style>
#table-wrapper {
  position:relative;
}
#table-scroll {
  height:100%;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  /*background:yellow;*/
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}
</style>
<div id="table-wrapper">
<div id="table-scroll">
<table style="width: 615px; border: none; margin-right: auto; text-align: left; margin-left: auto;" border="1" cellspacing="0" cellpadding="0">
<!----------------------------- ADAPTIVE TABLE ------------------------------->
<!------START------>
<!---------------------------------------------------------------------------->
<tbody>
    <tr id="row_0">
    <td>
     <p id="lyric_0" class="lyric_line">
Song lyrics line 1<br>
     </p>
    </td>
   </tr>     
   <tr id="row_1">
    <td>
     <p id="lyric_1" class="lyric_line">
Song lyrics line 2<br>
     </p>
    </td>
   </tr>
   <tr id="row_2">
    <td>
     <p id="lyric_2" class="lyric_line">
Song lyrics line 3<br>
     </p>
    </td>
   </tr>
   <tr id="row_3">
    <td>
     <p id="lyric_3" class="lyric_line">
Song lyrics line 4<br>
     </p>
    </td>
   </tr>   
   <tr id="row_4">
    <td>
     <p id="lyric_4" class="lyric_line">
Song lyrics line 5<br>
     </p>
    </td>
   </tr>   
   <tr id="row_5">
    <td>
     <p id="lyric_5" class="lyric_line">
Song lyrics line 6<br>
     </p>
    </td>
   </tr>

</tbody>
<!----------------------------- ADAPTIVE TABLE ------------------------------->
<!------END------>
<!---------------------------------------------------------------------------->
</table>
</div>
</div>

Код обвертки страницы:

Как Вы уже догадались содержимое своих таблиц вставляем между:

<style>
#table-wrapper {
  position:relative;
}
#table-scroll {
  height:100%;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  /*background:yellow;*/
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}
</style>
<div id="table-wrapper">
<div id="table-scroll">
<table style="width: 615px; border: none; margin-right: auto; text-align: left; margin-left: auto;" border="1" cellspacing="0" cellpadding="0">
<!----------------------------- ADAPTIVE TABLE ------------------------------->
<!------START------>
<!---------------------------------------------------------------------------->

<!----------------------------- ADAPTIVE TABLE ------------------------------->
<!------END-------->
<!---------------------------------------------------------------------------->
</table>
</div>
</div>

 

Полезное видео по теме:

Адаптивные таблицы