只有一个 <td> 在移动设备上排成全角（显示：块）

Question

我正在尝试在响应式网站上设置购物篮的样式。 在小屏幕上，设计要求“名称”列为全角，并位于同一表行中其他值的上方。

过去，我曾使用'display：block'允许在移动设备上设置样式表-但这仅在将其应用于一个td时似乎不起作用。 我最好的选择是保持表格单元格对于不同宽度字段的灵活性，同时又使名称字段全宽并位于行中其余部分的上方？

参见示例。

 table td.name { display: block; width: 100%; } 

 <table> <thead> <tr> <th scope="col">Name</th> <th scope="col">Quantity</th> <th scope="col">Price</th> <th scope="col">Line Total</th> </tr> </thead> <tbody> <tr> <td class="name">Product name, can be quite long and may span several lines</td> <td>3</td> <td>£201.38</td> <td>£604.14</td> </tr> </tbody> </table> 

Answer 1

一种不用javascript的方法是将名称两次放入文档中，然后使用媒体查询来隐藏不需要的副本。 我不确定屏幕阅读器将如何处理这个问题。

 table { width: 100%; } @media (min-width:600px) { .name1 { display: none; } .name2 { display: table-cell; } } @media (max-width:600px) { .name1 { display: block; } .name2 { display: none; } } 

 <div class="name1">Product name, can be quite long and may span several lines</div> <table> <thead> <tr> <th scope="col" class="name2">Name</th> <th scope="col">Quantity</th> <th scope="col">Price</th> <th scope="col">Line Total</th> </tr> </thead> <tbody> <tr> <td class="name2">Product name, can be quite long and may span several lines</td> <td>3</td> <td>£201.38</td> <td>£604.14</td> </tr> </tbody> </table> 

jsfiddle在这里