如何将这个 4 列表转换为单列表，但仍然保持表格的可访问性

您可以通过更改表格中的所有元素来完全重新设置表格样式，例如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";}

将显示更改为：

更新的小提琴

一旦你意识到你可以以这种方式设置表格的样式，即与任何其他元素相同 - 你几乎可以让它看起来像你想要的样子;)