преобразовать фиксированные таблицы в адаптивные для мобильных устройств

URL-адрес http://action.news содержит 3 столбца в таблице с фиксированной шириной)

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

что я сделал: добавил этот код ниже

https://gist.github.com/hkirsman/3002480

добавил это в соответствии с инструкциями Google

<meta name=viewport content="width=device-width, initial-scale=1">

я прочитал HTML-таблицу с автоматическим подходит для некоторых столбцов, фиксированная ширина для других

но все еще не могу сделать страницу удобной для мобильных устройств, верхняя часть, кажется, перестраивается


mobile css responsive
person youtube-dl fan    schedule 10.10.2017    source источник
comment
Возможно ли, что вы можете использовать div или список вместо таблицы для отображения содержимого? Таблицы довольно сложно сделать адаптивными   -  person Laura    schedule 10.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел этот пример на Codepen, так что вы можете попробовать его и настроить под свои нужды:

Вот код

HTML:

<table class="js-table participants-table">
  <caption>
    <p>Responsive Table</p>
  </caption>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Gender</th>
      <th>Picture</th>
    </tr>
  </thead>
  <tbody>
    <!--filled from javascript-->
  </tbody>
</table>

CSS:

HTML {
  font-size: 100%;
  line-height: 1.5;
  font-family: 'Raleway', sans-serif;
}

BODY {
  margin: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

IMG {
  max-width: 100%;
}


/*Style For Table*/

.participants-table {
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 auto;
  width: 90%;
}

.participants-table TD,
.participants-table TH {
  border: 1px solid #b4adad;
}

.participants-table IMG {
  width: 150px;
}

.participants-table THEAD {
  display: none;
}

.participants-table TD {
  display: block;
  position: relative;
  overflow-x: hidden;
  text-overflow: ellipsis;
}


@media only screen and (min-width: 450px) {
  .participants-table {
    width: auto;
  }
  .participants-table TD,
  .participants-table TH {
    padding: .2em 1em;
  }
  .participants-table THEAD {
    display: table-header-group;
  }
  .participants-table TD {
    display: table-cell;
    position: static;
  }
  .participants-table TD:before {
    display: none;
  }
}

ссылка на пример

person Krusader    schedule 10.10.2017