修复前3个动态列

时间:2015-10-14 10:04:25

标签: css html-table

我有一个带行标题的表格。我想在水平滚动时修复前3列。我在这张表中有近25列。

       <table cellspacing="0" class="data border" id="question_grid" style="width:110%"> 
            <thead>
                <tr class="headings">
                  <th>Heading 1</th>
                  <th>Heading 2</th>
                  <th>Heading 3</th>
                  <th>Heading 4</th>
                  <th>Heading 5</th>
                </tr>
                <tr class="filter">
                  <th>Filter 1</th>
                  <th>Filter 2</th>
                  <th>Filter 3</th>
                  <th>Filter 4</th>
                  <th>Filter 5</th>
                </tr>
            </thead>
            <tbody id="trgrid">
               <tr id="grid_menu_2"> 
                  <td>Data 1</td>
                  <td>Data 2</td>
                  <td>Data 3</td>
                  <td>Data 4</td>
                  <td>Data 5</td>                
                </tr>
            </tbody>
     </table>

我尝试使用CSS,但我对设计知之甚少。我向标题,过滤器和数据行的第一个子项添加了position:fixed。 数据行将是多个。我正在使用for循环来添加这些行。

.headings th:first-child
{
    position: fixed;
    left: 5px;
    right:20px;
}

.filter th:first-child
{
    position: fixed;
    left: 5px;
    right:20px;    
}

.main_data_first
{
    position: fixed;
    left: 5px;
    right:20px;    
}

1 个答案:

答案 0 :(得分:0)

http://datatables.net/找到解决方案它使用jQuery。