创建响应式 td colspan 表答案

【问题标题】：Create responsive td colspan tables创建响应式 td colspan 表
【发布时间】：2014-04-16 22:16:17
【问题描述】：

我在我的站点的数百个表中一直使用以下代码行。不过，我现在编写了很多这样的表格，以提高响应速度，并隐藏在移动设备上不重要的列。

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

【问题讨论】：

标签： responsive-design html-table

【解决方案1】：

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

【讨论】：

最终这不是我的选择。我使用了与上面的示例类似的方法来简单地选择哪些列在小屏幕上不那么重要并隐藏它们，同时引入一条消息，告诉用户是否要查看他们需要在大屏幕上查看的完整详细信息.

【解决方案2】：

遇到了这个问题，并通过添加没有 colspan 和“mobile-head”类的重复 thead 标记来解决它。

425px以上移动头被隐藏，低于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>

【讨论】：