Подтвердить что ты не робот

Как сделать отзывчивую таблицу

У меня есть таблица для представления некоторых данных на моей странице html. Я пытаюсь сделать эту таблицу отзывчивой. Как я могу это сделать?

Вот Demo.

4b9b3361

ОТВЕТЫ

Ответ 1

В основном

Ответная таблица - это просто таблица ширины 100%.

Вы можете просто настроить таблицу с помощью этого CSS:

.table { width: 100%; }

Демо здесь

Вы можете использовать медиа-запросы для отображения/скрытия/управления столбцами в соответствии с размерами экранов путем добавления класса (или таргетинга с использованием nth-child и т.д.):

@media screen and (max-width: 320px) {
    .hide { display: none; }
}

HTML

<td class="hide">Not important</td>

Более продвинутые решения

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

  • css-tricks.com предлагает эту статью для обработки больших таблиц данных.
  • Zurb также столкнулся с этой проблемой и решил ее с помощью javascript.
  • Footables - отличный плагин jQuery, который также поможет вам справиться с этой проблемой.
  • Как писал Elvin Arzumanoğlu, это отличный список примеров.

Ответ 3

Вы можете просмотреть этот Demo или bootstrap

Ответ 5

Если вы хотите контролировать td's/th, как вы можете сделать с элементами уровня блока и поплавками: Это невозможно. Невозможно сделать td float более или менее.

Ответ 6

Для таблицы с откликом вы можете сделать 100% каждого "td" и вставить связанный заголовок в "td на мобильном телефоне" (меньше ширины 768 пикселей).

Подробнее:
http://wonderdesigners.com/?p=227

Ответ 7

Чистый css способ сделать таблицу полностью отзывчивой, не требуется JavaScript. Демо-версия Checke здесь Ревизионные таблицы

<!DOCTYPE>
  <html>
  <head>
  <title>Responsive Table</title>
  <style> 
  /* only for demo purpose. you can remove it */
 .container{border: 1px solid #ccc; background-color: #ff0000; 
  margin: 10px auto;width: 98%; height:auto;padding:5px; text-align: center;}

 /* required */
.tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto; 
 background-color:green;  height: auto; padding: 5px;}

 /* only for demo purpose just for stlying. you can remove it */
 table { font-family: arial; font-size: 13px; padding: 2px 3px}
 table.responsive{ background-color:#1a99e6; border-collapse: collapse; 
 border-color: #fff}

tr:nth-child(1) td:nth-of-type(1){
 background:#333; color: #fff}
 tr:nth-child(1) td{
 background:#333; color: #fff; font-weight: bold;}
 table tr td:nth-child(2) {
 background:yellow;
}
 tr:nth-child(1) td:nth-of-type(2){color: #333}
 tr:nth-child(odd){ background:#ccc;}
 tr:nth-child(even){background:#fff;}
</style>
</head>
<body>

<div class="container">
<div class="tablewrapper">
<table  class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
 <tr> 
 <td>Name</td> 
 <td>Email</td> 
 <td>Phone</td> 
 <td>Address</td> 
 <td>Contact</td> 
 <td>Mobile</td> 
 <td>Office</td> 
 <td>Home</td> 
 <td>Residency</td> 
 <td>Height</td>
 <td>Weight</td>
 <td>Color</td> 
 <td>Desease</td> 
 <td>Extra</td>
 <td>DOB</td>
 <td>Nick Name</td> 
</tr>
<tr>  
<td>RN Kushwaha</td>
<td>[email protected]</td>
<td>--</td>  
<td>Varanasi</td>
<td>-</td> 
<td>999999999</td> 
<td>022-111111</td> 
<td>-</td>
<td>India</td> 
<td>165cm</td> 
<td>58kg</td> 
<td>bright</td> 
<td>--</td> 
<td>--</td> 
<td>03/07/1986</td> 
<td>Aryan</td> 
</tr>
</table>
</div>
</div>
</body>
</html>

Ответ 8

Чтобы сделать отзывчивую таблицу, вы можете сделать ширину каждого td 100% и вставить связанный заголовок в td в мобильных браузерах (это меньше 768px width.)

Вот веб-сайт, демонстрирующий эту технику: http://www.quizexpo.com/list-of-banks-in-india/