只有一行​​在行中为全宽（显示：块）在手机上

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 here