Реагирующие таблицы данных | изменение разметки на основе размера экрана

У меня есть рабочий стол с 7-столбовой табличной сеткой (с использованием Bootstrap) с именами столбцов в верхней части.Реагирующие таблицы данных | изменение разметки на основе размера экрана

На небольших экранах сетка должна быть 3 столбца. Названия 7 столбцов разбиваются на 2 отдельные строки и чередуются с другими строками. В принципе, порядок разметки полностью изменяется на основе размера экрана.

Каков наилучший способ приблизиться к этому?

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

Я также видел этот комментарий responsejs: Replace HTML depending on screen size Что дает вам USER- удобный способ поменять контент в зависимости от размера экрана, кажется, почти как отдельная страница для мобильных устройств, хотя ...

источник

2013-09-23 mustacheMcGee

Ну, я неправильно понял ваш вопрос и придумал что-то, что это не ответ, но я не хочу работать, чтобы пропадать, так что здесь что-то рассмотреть через Bootstrap 3: http://bootply.com/82732 –

Спасибо за внимание, хотя :) Да, это в основном то, что у меня есть сейчас. Я думаю, может быть, что-то вроде этого будет делать это: http://stackoverflow.com/questions/9886676/jquery-add-closing-tag-and-then-reopen-when-using-before – mustacheMcGee

Ранее Решение:

<table> 
    <tr> 
     <th>Header1</th> 
     <th>Header2</th> 
     <th>Header3</th> 
     <th class="visible-desktop">Header4</th> 
     <th class="visible-desktop">Header5</th> 
     <th class="visible-desktop">Header6</th> 
     <th class="visible-desktop">Header7</th> 
    </tr> 
    <tr> 
     <td>Data1</td> 
     <td>Data2</td> 
     <td>Data3</td> 
     <td class="visible-desktop">Data4</td> 
     <td class="visible-desktop">Data5</td> 
     <td class="visible-desktop">Data6</td> 
     <td class="visible-desktop">Data7</td> 
    </tr> 
</table>

Edit: Так вы имеете в виду вы хотите это для небольших экранов:

H1 H2 H3 
D1 D2 D3 
H4 H5 H6 H7 
D4 D5 D6 D7

И как вы планируете иметь следующую строку данных? как это? :

H1 H2 H3 
D1 D2 D3 
H4 H5 H6 H7 
D4 D5 D6 D7 
H1 H2 H3 
D8 D9 D10 
H4 H5 H6 H7 
D11 D12 D13 D14

Ну, это не очень хороший пользовательский интерфейс на маленьком экране!

Однако, если вы все еще хотите это сделать, я бы рекомендовал вам использовать span divs вместо таблиц.

В этом случае что-то вроде этого:

<div class='span12'> //Entire row1 which will be split into 2 for smaller screens 
    <div class='span6'> 
     <div class='span2'> 
      <table> 
       <tr> 
       <td>H1</td> 
       </tr> 
        <tr> 
       <td>D1</td> 
       </tr> 
      </table> 
     </div> 
     <div class='span2'> 
       <table> 
        <tr> 
        <td>H2</td> 
        </tr> 
         <tr> 
        <td>D2</td> 
        </tr> 
       </table> 
     </div> 
     <div class='span2'> 
      <table> 
       <tr> 
       <td>H3</td> 
       </tr> 
        <tr> 
       <td>D3</td> 
       </tr> 
      </table> 
     </div> 
    </div> 
    <div class='span6'> 
     /*And so on*/ 
    </div> 
</div> 
<div class='span12'> //Entire row1 which will be split into 2 for smaller screens 
... 
</div>

источник

2013-09-24 18:26:46 user1071979

На самом деле вместо заголовков 4,5, 6,7 исчезают, тогда их необходимо вставить в свою строку после Data3 – mustacheMcGee

Реагирующие таблицы данных | изменение разметки на основе размера экрана

ответ

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