Таблица переназначения для отзывчивым

Question

Имея HTML таблицу, как это:

<table> 
    <tr> 
     <td>A</td> 
     <td>N</td> 
    </tr> 
    <tr> 
     <td>B</td> 
     <td>O</td> 
    </tr> 
    <tr> 
     <td>C</td> 
     <td>P</td> 
    </tr> 
    <tr> 
     <td>D</td> 
     <td>Q</td> 
    </tr> 
    <tr> 
     <td>E</td> 
     <td>R</td> 
    </tr> 
    <tr> 
     <td>F</td> 
     <td>S</td> 
    </tr> 
    <tr> 
     <td>G</td> 
     <td>T</td> 
    </tr> 
    <tr> 
     <td>H</td> 
     <td>U</td> 
    </tr> 
    <tr> 
     <td>I</td> 
     <td>V</td> 
    </tr> 
    <tr> 
     <td>J</td> 
     <td>W</td> 
    </tr> 
    <tr> 
     <td>K</td> 
     <td>X</td> 
    </tr> 
    <tr> 
     <td>L</td> 
     <td>Y</td> 
    </tr> 
    <tr> 
     <td>M</td> 
     <td>Z</td> 
    </tr> 
</table> 

выглядит как так:

что все хорошо, теперь на маленьких экранах, я хотел бы иметь только один <td> за row но сохранив при этом право «по алфавиту». Так оно и должно быть похожим так:

Есть ли способ, чтобы изменить это CSS только, чтобы получить желаемый результат? Я создал скрипку здесь http://jsfiddle.net/5eweva69/

Answer 1

Я согласен об использовании дивы или какой-то другой вариант, но если вы застряли на столах - А как насчет divs внутри таблицы? скрипку здесь: http://jsfiddle.net/nvnghLn7/

<table> 
    <tr> 
     <td id="leftSide"> 
     <div>A</div> 
     <div>B</div> 
     <div>C</div> 
     <div>D</div> 
     <div>E</div> 
     <div>F</div> 
     <div>G</div> 
     <div>H</div> 
    </td> 
    <td id="rightSide"> 
     <div>N</div> 
     <div>O</div> 
     <div>P</div> 
     <div>Q</div> 
     <div>R</div> 
     <div>S</div> 
     <div>T</div> 
     <div>U</div> 
    </td> 
    </tr> 
</table> 

Затем установите #leftSide и #rightSide для отображения: блок на небольших экранах. (Установка TD для блокировки не будет работать с объявлениями типа купола, поэтому использование DIVS в целом является лучшим вариантом.)

Answer 2

Там нет никакого способа, вы можете сделать это с помощью <table> элемента, <td> тега означает столбец и <tr> означает строку, не CSS не может изменить эту структуру, если не просить W3C (World Wide Web Consortium) Community, кто делает стандарты HTML.

Ну вы можете достичь подобных результатов с использованием начальной загрузки или <div> или <ul> список

УДАЧИ хотя .. :)