responsive-design - 创建响应式 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 中？

我还创建了一个 fiddle 来尝试说明我的问题:

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

Answer 1

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