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 的插件应该有所帮助。到目前为止，我没有意识到正确的程序来解决我自己的表，但这是一个很好的开始。我希望有人会帮助我，但似乎在某些情况下，一切都取决于作者。：/

响应表，固定两个左列和标题

1 个答案: