Question

我正在尝试在响应式网站上设置购物篮的样式。在小屏幕上，设计需要名称＆＃39;列为全宽并位于同一表格行的其他值之上。

过去我曾使用过＆display：block＆＃39;允许在移动设备上使用样式表 - 但是当将它应用到一个td时，这似乎不起作用。对于不同宽度的字段保持表格单元格的灵活性同时使名称字段全宽并且位于行中其余部分之上的最佳选择是什么？

例如，请参阅代码段。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

在移动设备上只有一行是全宽（显示：块）

1 个答案: