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

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

В чем сложности адаптации табличной верстки?

Самый простой способ адаптации (после проставления тега meta name="viewport", увеличения шрифта и прочего) – это сборка блоков «в столбик». То есть div-ы, которые были рядом, просто становятся друг под другом, и исчезает горизонтальная прокрутка. Для блочной верстки, к примеру, достаточно прописать, если два блока рядом

<div class="tt">1</div>
<div class="tt">2</div>
<style>
.tt{
float:left;
width:50%;
}
</style>

Когда ширина становится критической, добавляем вот это:

<style>
@media screen and (max-width: 640px) {
.tt{
width:100%;
}
}
<style>

То есть просто растягиваем блоки во всю ширину. А если имеем аналогичную табличную верстку:

<style>
.tt{
width:50%;
}
</style>
<table>
<tr>
<td class="tt">1</td>
<td class="tt">2</td>
</tr>
</table>

то уже такое решение не прокатит.

Что делать?

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

То есть в нашем случае как-то так:

<style>
@media screen and (max-width: 640px) {
.tt{
width:100%;
}
.tt:nth-child(2){
position: absolute;
left: 0px;
margin-top: 1900px;
}
}
</style>

Кстати частично именно так адаптирован и данный блог, который вы в настоящий момент читаете. Если у вас есть проблемы с версткой, отображением элементов на сайте или чем-то еще, то смело пишите на почту up777up@yandex.ru - я с удовольствием и за небольшую плату вам помогу.