Таблицы ответных данных

Я пытаюсь создать гибкую сетку данных, которая может изменять макеты в зависимости от ширины экрана. Я знаю, как использовать медиа-запросы, но я пытаюсь найти лучший способ создания реальной сетки данных. следует ли использовать таблицы, divs или списки?Таблицы ответных данных

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

Таблица Заголовок Пункт 1 | Строка 1 Значение 1 | Строка 1 Значение 2 | Строка 1 Значение 3 |

Таблица Заголовок Пункт 2 | Строка 2 Значение 1 | Строка 2 Значение 2 | Строка 2 Значение 3 |

Но если пользователь уменьшает размер экрана, я хочу, чтобы переместить элементы заголовка сверху и значения по строке ниже

Таблица Header Пункт 1
Строка 1 Значение 1 | Строка 1 Значение 2 |

Таблица Заголовок Пункт 2
Строка 2 Значение 1 | Строка 2 Значение 2 |

Я думаю, что использование Div's может быть моим лучшим способом получить этот результат, но есть ли какие-либо другие предложения?

Спасибо!

источник

2012-02-08 fivepix

Если это табличные данные, использование '

' - лучший способ. Чтобы сделать его «отзывчивым», тогда всем понадобится несколько медиа-запросов для обновления таблицы на основе размера видового экрана. – rxgx

ответ

This - фантастическая статья о сокрытии элементов на основе ширины экрана. Вы используете некоторые мультимедийные запросы CSS для включения и отключения определенных элементов с классом «необязательный» или «существенный». Надеюсь это поможет!

источник

2012-02-08 03:03:34 Stevie

Как насчет такого рода вещи - установить клетки встраивать-таблицу:

<html> 
<head> 
    <style> 
    #data{width:70%;} 
    #data td {display:inline-table;padding:20px;} 
    </style> 

</head> 
<body> 

<table id="data"> 
    <tr><th>Header 1</th> 
     <td>row 1 cell 1</td><td>row 1 cell 2</td> 
    </tr> 
    <tr><th>Header 2</th> 
     <td>row 2 cell 1</td><td>row 2 cell 2</td> 
    </tr> 
</table> 
</body> 
</html>

источник

2012-10-28 17:48:46 paulusm

Из моего личного опыта, лучше идти вперед с DIV, чем стол. При анализе вашего требования div будет лучшим вариантом.

источник

2013-08-07 09:56:57

Смежные вопросы