修复html表的标题

时间:2022-11-13 02:05:00

I have fixed the columns of html table as given in this fiddle. Same way I am trying to fix only the header row of table as,

我修复了这个小提琴中给出的html表的列。同样的方式我试图只修复表的标题行,

var $table = $('.table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

$fixedColumn.find('tbody').remove();

$fixedColumn.find('thead th').each(function (i, elem) {
    $(this).width($table.find('tbody tr:first td:eq(' + i + ')').width());
});

which is given in this fiddle. But the header didn't fixed. What is missing?

在这个小提琴中给出的。但标题没有修复。缺什么?

1 个解决方案

#1


How about this??

这个怎么样??

DEMO

   <tr class="fixed">
       <th>#</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
   </tr>

css

.fixed
{
    position:fixed;
    background:gray;

}

You can try this EXAMPLE too if you are much more interested!!

如果你对此感兴趣,你也可以尝试这个例子!!

#1


How about this??

这个怎么样??

DEMO

   <tr class="fixed">
       <th>#</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
   </tr>

css

.fixed
{
    position:fixed;
    background:gray;

}

You can try this EXAMPLE too if you are much more interested!!

如果你对此感兴趣,你也可以尝试这个例子!!