具有固定两个左列和标题的响应表答案

【问题标题】：Responsive table with fixed two left columns and header具有固定两个左列和标题的响应表
【发布时间】：2017-03-28 03:45:08
【问题描述】：

我已阅读有关此问题的一些文章，但无法解决。大多数示例显示表头由一行组成，同时行是单行，如日历。我的表有双行标题，行以行跨度开头，所以我无法让它工作。我需要固定前两列（或仅左列）和固定标题，因此如果屏幕变窄，其余列可以向右滚动。这是表格

    <table class="responsive">
    <tbody>             
    <tr>
    <th rowspan="2" scope="col">CITY</th>
    <th rowspan="2" scope="col">YP</th>
    <th colspan="3" scope="col">MORNING</th>
    <th colspan="3" scope="col">MORNING</th>
    <th colspan="3" scope="col">NIGHT</th>
    </tr>
    <tr>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    <td>Temp</td>
    <td>Sun</td>
    <td>Wind</td>
    </tr>
    <tr>
    <th rowspan="2" scope="col">Name of city 1</th>
    <td>I</td>
    <td>80</td>
    <td>Y</td>
    <td>N</td>
    <td>90</td>
    <td>Y</td>
    <td>N</td>
    <td>96</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <tr>
    <td>II</td>
    <td>94</td>
    <td>Y</td>
    <td>N</td>
    <td>96</td>
    <td>Y</td>
    <td>N</td>
    <td>98</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <th rowspan="2" scope="col">Name of city 2</th>
    <td>I</td>
    <td>77</td>
    <td>N</td>
    <td>N</td>
    <td>80</td>
    <td>Y</td>
    <td>Y</td>
    <td>88</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    <tr>
    <td>II</td>
    <td>80</td>
    <td>Y</td>
    <td>Y</td>
    <td>82</td>
    <td>Y</td>
    <td>Y</td>
    <td>87</td>
    <td>N</td>
    <td>Y</td>
    </tr>
    </tbody>
    </table>

我尝试使用 Zurb Studio - Crafty Responsive Tables，但我的表格的复杂性与演示示例不匹配。

【问题讨论】：

没有人吗？不是一个简单的线索，链接？难以置信。
你能做一个工作小提琴吗？我认为这应该已经响应了。

标签： html html-table responsive

【解决方案1】：

经过长时间的网站研究，我认为名为 RowsGroup 的插件应该会有所帮助。直到现在我还没有意识到解决我自己的表格的正确程序，但这是一个不错的开始。我曾希望有人会帮助我，但似乎在某些情况下一切都取决于作者。：/

【讨论】：