Блог

Главная - Вопросы по программированию - Специфичный макет таблицы

Специфичный макет таблицы

#html #css #adaptive-design #adaptive-layout

#HTML #css #адаптивный дизайн #адаптивная компоновка

Вопрос:

Я хочу создать адаптивную таблицу с вертикальной левой строкой заголовка на мобильном устройстве следующим образом:

 Header 1  data data data
Header 2  data data data
Header 3  data data data

И обычная таблица для рабочего стола, подобная этой:

 Header 1 Header 2 Header 3
 data     data      data
 data     data      data

Есть ли у кого-нибудь идеи, как я могу сделать это только с помощью CSS и HTML (я хочу создать таблицу, чтобы было легко добавлять новые строки с помощью PHP).

Комментарии:

1. Привет, используйте для этого структуру ul li.

2. Не могли бы вы показать пример, пожалуйста ?!

Ответ №1:

Вы можете использовать mediaqueries и сбрасывать отображаемые значения для элементов таблицы:

 table {
  table-layout:fixed;
  border-collapse:collapse;/* whatever */
}
th, td {
  width:100px;/* whatever */
  border:solid;/* See me */
}
th {
  color:#145492
}
@media all and (max-width : 640px) {
  table {
    width:100%;/* whatever needed */
  }
  tbody {
    display:table-row;/* optionnal*/
  }
  tr {
    display:table-cell;    
  }
  th, td {
    display:block;
    width:auto;/* reset width if needed */
  }
}
tr:last-of-type {
  text-align:center;
  text-shadow:1px 1px tomato;
  } 
 <table>
  <tr>
    <th>header</th>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <th>header</th>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <th>header</th>
    <td>test snippet</td>
    <td>in full</td>
    <td>page mode</td>
  </tr>
</table>

редактировать, только что заметил, что макет — это наоборот. может быть, вы можете создать свой HTML, чтобы я мог обновить фрагмент, во всяком случае, метод есть, какой бы ни была структура 😉

Спасибо

Комментарии:

1. Да, это именно то, чего я хотел. Спасибо!

Ответ №2:

Для вашего требования к макету требуется код Javascript или определение на PHP, если запрос с мобильного или настольного компьютера, а затем отображение требуемого макета на PHP

Ответ №3:

Вы можете просто поместить <th> теги там, где они вам нужны.

 <table>
<tr>
  <th>Header 1</th>
  <td>Content 1,1</td>
  <td>Content 1,2</td>
</tr>
<tr>
  <th>Header 2</th>
  <td>Content 2,1</td>
  <td>Content 2,2</td>
</tr>
<tr>
  <th>Header 3</th>
  <td>Content 3,1</td>
  <td>Content 3,2</td>
</tr></table>

скрипка: https://jsfiddle.net/daswagpanda/byxk0rt6 /

Комментарии:

1. Показывает макет мобильного устройства как на мобильном, так и на рабочем столе

2. Нет, это хорошо работает только для мобильных устройств. Мне нужна именно та структура, о которой я упоминал. (Дизайнер хочет, чтобы я сделал так, и я понятия не имею, как это сделать =[ )

3. @Simon Ах да. Могу я спросить, почему вы не можете использовать JavaScript? Это было бы очень просто с JS.

Метки: