HTML table fixed top row without

Question

I convert an Excel file into html table with the PHPExcel library.

EDITED output : https://jsfiddle.net/simsimzzz/d1ccqveq/15/

How can I ( JQuery ? ) fix the top row as a <thead>?

    <table border="0" cellpadding="0" cellspacing="0" id="sheet0" class="sheet0 gridlines">
        <colgroup>
        <col class="col0">
        <col class="col1">
        <col class="col2">
        <col class="col3">
        </colgroup>
<tbody>
          <tr class="row0">
            <td class="column0 style3 s">Client Type</td>
            <td class="column1 style3 s">Client</td>
            <td class="column2 style3 s">N° Incident</td>
            <td class="column3 style3 s">blabla</td>
</tr>
</tbody>

PHPExcel doesn't generate <thead></thead>..

EDIT : Now I have a <thead></thead> , how can I fix this one and keep the width of cells according to the <tbody>

Possible duplicate of [HTML table with fixed headers?](https://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — Sunil, Dec 28 '17 at 15:00
Do I understand correctly that you know how to make a static `` but `` doesn't exist in your table? — Roamer-1888, Dec 28 '17 at 15:22

score 2 · Accepted Answer · answered Dec 28 '17 at 16:43

2

Seems that you need create a <thead> then move the header row into it, from of the <tbody>.

Try this :

jQuery(function($) {
    var $table = $('#sheet0'); // select the table of interest
    var $thead = $('<thead/>').prependTo($table); // create <thead></thead>
    $table.find('tbody tr').eq(0).appendTo($thead); // move the header row from tbody into thead

    // Now the table is ready to have your chosen method applied to fix the position of the thead.

});

answered Dec 28 '17 at 16:43

Roamer-1888

19,138
5
33
44

Super great, i have a now , can you tell me how to fixe it now ? https://jsfiddle.net/simsimzzz/d1ccqveq/15/ Thanks a lot – Simon Delaunay Dec 29 '17 at 08:52
if I apply thead { position : fixed; } , cells dont keep the initial width according to the – Simon Delaunay Dec 29 '17 at 09:05
EDIT : it works great ! Solved issue ! Thanks @Roamer-1888 – Simon Delaunay Dec 29 '17 at 15:21

HTML table fixed top row without

1 Answers1