如何将这个 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 就好像它们是非表格元素一样。这取决于您希望单列的外观。

也许生成的内容将有助于考虑表格标题（视觉关联）..即通过隐藏 元素并在“单元格”内容之前生成“标题”..将尝试制作一个示例小提琴

示例 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： 我放置的注释将标题行放入 中，以便可以隐藏它

<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>€ 40.00</td><td>€ 20</td><td>3 working days</td></tr>
   <tr><td style="color:#666">Princess Costume *</td><td>€ 20.00</td><td>€ 5</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td>Soldier Uniform</td><td>€ 20.00</td><td>€ 5</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td>Pink Roller Skates</td><td>€ 35.00</td><td>€ 10</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td style="color:#666">Black Roller Skates *</td><td>€ 35.00</td><td>€ 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";}

它将显示更改为：

更新的 Fiddle

一旦你意识到你可以设置样式以这种方式设置表格，即与任何其他元素相同 - 您几乎可以使其看起来像您想要的那样；）