Как заморозить строку заголовка в таблице HTML?

Question

Я использую таблицу HTML и применил к ней вертикальную прокрутку, а теперь хочу заморозить строку заголовка во время прокрутки.Как я могу это сделать?

Answer 1

HTML:

<table>
 <tr id="header-row">
  <th>header col 1</th>
  <th>header col 2</th>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
 <tr>
 <tr>...</tr>
 ...
</table>

CSS:

#header-row { position:fixed; top:0; left:0; }
table {padding-top:15px; }

Answer 2

Один простой способ - создать 2 таблицы и установить ширину столбцов.Первый действует как заголовок

В нижней второй таблице находится полоса прокрутки и отображаются только данные.

Answer 3

Проверьте этот плагин jQuery. Это позволяет вам заморозить столбец и исправить заголовок, как вы хотели.

http://gridviewscroll.aspcity.idv.tw/

Answer 4

для дальнейшего поиска решения для создания таблицы с заблокированным заголовком столбца:

Вот CSS для основного PortfolioList div , затем заголовок :

<style type="text/css">
    div.PortfolioList  
    {   /* bkgrnd color is set in Site.css, overflow makes it scrollable */
        height:500px; width:680px; position: static;  overflow-y:auto; float:left;                             
    }
    div.PortfolioList_hdr
    {   /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
        background-color:#7ac0da; height:45px; width:680px; position: static;  float:left;                             
    }    
</style>

Теперь вот таблицы в двух упомянутых выше разделах:

    <div class="PortfolioList_hdr">
       <table id="pftable_hdr">
        <caption>Portfolio Definitions</caption>
        <thead>
            <tr>
             <th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>                    
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="PortfolioList">
    <table id="pftable">
        <tbody>
        </tbody>
    </table>
</div>

Я использовал jQuery, чтобы добавить и и заполнить содержимое соответствующим образом.* Надеюсь, это поможет ...

• Боб

Answer 5

Это похоже на работу в FF.

<table >  
    <thead><tr><th>This is my header</th></tr></thead>
    <tbody style="max-height:100px; overflow-y:auto; display:block">
        <tr>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr>
    </tbody>
</table>