创建响应式 td colspan 表

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/希望它有帮助！