如何将此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:注意我将标题行放入a中,<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";}

这会将显示更改为:

更新小提琴

一旦你意识到你可以用这种方式设置表格,即与任何其他元素相同 - 你几乎可以让它看起来如你所愿;)