Как преобразовать эту таблицу из 4 столбцов в таблицу с одним столбцом, но при этом сохранить доступность таблицы

Question

Я хочу сделать эту таблицу http://jsfiddle.net/B7SVK/ из 4 столбцов в один столбец, потому что мне нужно преобразовать эту таблицу с рабочего стола на мобильный сайт, а мобильное устройство имеет ограниченную ширину. и я не хочу горизонтальной прокрутки на веб-странице.

Итак, есть ли способ преобразовать эту таблицу из 4 столбцов в таблицу из одного столбца, сохраняя при этом доступность и связь между соответствующими ячейками данных и заголовком

  <table>
        <caption>
        Contact Information
        </caption>
<thead>
        <tr>
                <th scope="col">Name</th>
                <th scope="col">Phone#</th>
                <th scope="col">Fax#</th>
                <th scope="col">City</th>
        </tr>
</thead>
<tbody>
        <tr>
                <th scope="row">Joel Garner</th>
                <td>412-212-5421</td>
                <td>412-212-5400</td>
                <td>Pittsburgh</td>
        </tr>
        <tr>
                <th scope="row">Clive Lloyd</th>
                <td>410-306-1420</td>
                <td>410-306-5400</td>
                <td>Baltimore</td>
        </tr>
        <tr>
                <th scope="row">Gordon Greenidge</th>
                <td>281-564-6720</td>
                <td>281-511-6600</td>
                <td>Houston</td>
        </tr>
</tbody>
</table>

Answer 1

Вы можете полностью изменить стиль таблицы, изменив все элементы внутри таблицы на display: block; например,

table, thead, tbody, tr, th, td {display: block; text-align: left;}

это просто широкая развертка, так как вы можете также иметь некоторые из них display: inline; или float, как если бы они не были элементами таблицы ... это зависит от того, как вы хотите, чтобы ваш отдельный столбец выглядел.

и, возможно, сгенерированный контент поможет в отношении заголовков таблиц (визуальных ассоциаций) .. т.е. скрывая элементы <th> и создавая "заголовок" до того, как контент "ячейки" .. попытается создать образец скрипки

Пример JSFiddle

Код в скрипте:

html, body {margin: 0; padding: 0;}

table, thead, tbody, tr, th, td {display: block; text-align: left;}

thead {display: none;}

td:before {
float: left;
width: 200px;
background: #eee;
}

td {overflow: hidden;}

td:before {content: "Item";}
td+td:before {content: "Price (Euro)";}
td+td+td:before {content: "Postage and Packaging (Euro)";}
td+td+td+td:before {content: "Estimated Delivery Time";}

HTML: примечание Я поместил строку заголовка в <thead>, чтобы ее можно было скрыть

<table class="single-borders">
  <thead>
    <tr><th>Item</th><th>Price (Euro)</th><th>Postage and Packaging (Euro)</th><th>Estimated Delivery Time</th></tr>
  </thead>
  <tbody>
   <tr><td>Rocking Horse</td><td>€&nbsp;40.00</td><td>€&nbsp;20</td><td>3 working days</td></tr>
   <tr><td style="color:#666">Princess Costume *</td><td>€&nbsp;20.00</td><td>€&nbsp;5</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td>Soldier Uniform</td><td>€&nbsp;20.00</td><td>€&nbsp;5</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td>Pink Roller Skates</td><td>€&nbsp;35.00</td><td>€&nbsp;10</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td style="color:#666">Black Roller Skates *</td><td>€&nbsp;35.00</td><td>€&nbsp;10</td><td>Next day if ordered before 12.00</td></tr>
  </tbody>
</table>

---

Обновлено

согласно комментариям, чтобы изменить на один столбец 176px;

попробуйте этот CSS:

html, body {margin: 0; padding: 0;}

table, thead, tbody, tr, th, td {display: block; text-align: left;}

table {width: 176px;}

thead {display: none;}

tr {
 margin: 10px 0; 
 border: 1px solid #000;
}

td:before {
 display: block;
 background: #eee;
 font-weight: bold;
}

td:before {content: "Item";}
td+td:before {content: "Price (Euro)";}
td+td+td:before {content: "Postage and Packaging (Euro)";}
td+td+td+td:before {content: "Estimated Delivery Time";}

, который изменяет отображение на это:

Обновленная скрипка

Как только вы поймете, что можете стилизовать таблицу таким образом, то есть, как и любой другой элемент - вы можете сделать так, чтобы она выглядела так, как вы хотите;)