Question

我在我的网站上的数百个表中使用了以下一行代码。但是，我现在已经将很多这些表格编码为更具响应性，并隐藏了在移动设备上不重要的列。

<tr>
  <td colspan="11" class="resultsubheading">Not Classified</td>
</tr>
<tr class="resulttext" onmouseover="this.className='cell_over';" onmouseout="this.className='cell_out';" unselectable="on">
  <td class="resultpos"></td>
  <td class="resultnum">74</td>
  <td class="resultclass"></td>
  <td class="resultdriver"><a href="../../../drivers/wtcc/oriola_results.php#2013">Pepe ORIOLA</a></td>
  <td class="resultnat"><img src="../../flag/es.gif" title="Spain"></td>
  <td class="resultentrant"><a href="../../../teams/wtcc/tuenti_results.php">Tuenti Racing Team</a></td>
  <td class="resultcar">SEAT Le&oacute;n WTCC</td>
  <td class="resultlaps">8</td>
  <td class="resulttime">DNF</td>
  <td class="resultbest">2:20.073</td>
  <td class="resultgd">4</td>
</tr>

我遇到的问题是没有办法在CSS中定义colspan，这就是在不需要时隐藏移动设备上其他列的内容。

我已经包含了一个额外的行，以显示每个表格单元格有一个隐藏或取消隐藏的类，具体取决于CSS样式表中的屏幕宽度。

是否有一种简单有效的方法来定义colspan或等效的，具体取决于屏幕宽度，如CSS？

我还创造了一个小提琴试图说明我的问题：

http://jsfiddle.net/j6g48/1/

Answer 1

有一篇关于数据表和响应式设计的优秀文章。这是链接：http://css-tricks.com/responsive-data-tables/希望它有所帮助！

Answer 2

解决此问题并通过添加重复的thead标记（没有colspan和“ mobile-head”类）来解决。

在425像素上方，移动头被隐藏，在其下方显示为display: table-header-group;，而原始的主题被隐藏。

table thead.mobile-head{
  display: none;
}

@media(max-width: 425px){
    thead{display: none}
    table thead.mobile-head{
        display: table-header-group;
        font-size: 14px;
    }
}

<thead>
  <tr data-hook="cart_items_headers">
    <th class="cart-item-description-header" colspan="2"><%= t('spree.item') %></th>
    <th class="cart-item-price-header"><%= t('spree.price') %></th>
    <th class="cart-item-quantity-header"><%= t('spree.qty') %></th>
    <th class="cart-item-total-header"><%= t('spree.total') %></th>
    <th class="cart-item-delete-header"></th>
  </tr>
</thead>
<thead class="mobile-head">
  <tr data-hook="cart_items_headers">
    <th class="cart-item-description-header"><%= t('spree.item') %></th>
    <th class="cart-item-price-header"><%= t('spree.price') %></th>
    <th class="cart-item-quantity-header"><%= t('spree.qty') %></th>
    <th class="cart-item-total-header"><%= t('spree.total') %></th>
    <th class="cart-item-delete-header"></th>
  </tr>
</thead>

创建响应式td colspan表

2 个答案: