带有固定的两个左列和标题的响应表

Question

我已经阅读了一些有关此问题的文章，但无法解决。 大多数示例都显示表，其中表头由一行组成，同时行是单行，如日历。 我的表具有双行标题，并且行以rowspan开头，因此无法正常工作。 我需要固定的前两列（或仅左列）和固定的标题，因此如果屏幕变窄，则其余列可向右滚动。 这是桌子

    <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，但是我的桌子的复杂性质与演示示例不匹配。

Answer 1

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