1

Собственно есть сайт с табличной версткой, нужно сделать его адаптивным. Если с блочной структурой мне понятен принцип (max-width и проценты), то в табличной верстке - нет. Как лучше поступить?

2
  • если есть возможность переделайте на div, html5
    – soledar10
    6 июл 2016 в 16:42
  • Статья, как делать responsive data tables
    – stackanon
    7 июл 2016 в 5:25

2 ответа 2

1

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

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Test</title>
  <meta charset="utf-8" />
  <style>
    #header {
      background-color: aqua;
    }
    #sidebar {
      background-color: aquamarine;
      width: 300px;
    }
    table {
      width: 100%;
    }
    @media(max-width: 960px) {
      table, tr, td, tbody {
        display: block;
        width: 100%;
      }
      #header,
      #sidebar,
      #content {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td id="header" colspan="2">
        <h1>Header</h1>
      </td>
    </tr>
    <tr>
      <td id="sidebar">
        <h2>Sidebar</h2>
      </td>
      <td id="content">
        <h2>Content</h2>
      </td>
    </tr>
  </table>
</body>

</html>

Это конечно простой пример, но если другой возможности нет то как временное решение подойдёт. Но если у вас сложный макет, то лучше переверстать блоками.

0

тоже указываешь проценты и min или max width, не вижу сложности.

Принцип чтобы при нужной ширине экрана смартфона, не нужная ячейка стала display:none. И добавить строки снизу или сверху куда надо, чтобы на смартфоне display:block а на компе display:none

Тем самым возможно придется повторить код в двух строках. Таблица она и есть таблица. Она состоит из столбцов, строк и собственно ячеек. Надо понимать куда какую ячейку двигать.

Если хочется каких-то действий, которые не возможны с таблицой - тогда проще на блоки переверстать. Если вопрос как лучше поступить: лучше переверстать на блоки. Можно конкретнее спросить какое действие надо делать с таблицей. А можно обратиться к специалисту

5
  • вполне себе по-моему ответ... Если надо что-то конкретнее могу ответить. Ну если человеку понятен принцип с блочной не вижу разницы особой. Может и не прав 6 июл 2016 в 17:16
  • на узком экране это не пройдет, в див-ной верстке сайдбары переносятся вниз или вверх, все дивы 100% ширины, вот что человек хотел узнать, скорее всего. 6 июл 2016 в 19:22
  • ну если надо это можно сделать, чтобы при нужной ширине экрана смартфона, не нужная строка стала display:none. И добавить строки снизу или сверху куда надо, чтобы на смартфоне display:block а на компе display:none 6 июл 2016 в 20:20
  • Тем самым возможно придется повторить код в двух строках. Таблица она и есть таблица. Она состоит из столбцов, строк и собственно ячеек. Надо понимать куда какую ячейку двигать. 6 июл 2016 в 20:34
  • Если хочется каких-то действий, которые не возможны с таблицой - тогда проще на блоки переверстать. Если вопрос как лучше поступить: лучше переверстать на блоки. Можно конкретнее спросить какое действие надо делать с таблицей. А можно обратиться к специалисту) 6 июл 2016 в 20:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.