Таблица с фиксированным заголовком строки и колонки

Возникает вопрос, аналогичный этому Here. Но это по-другому. Здесь мне нужен столбец и строка в виде заголовка. У меня есть таблица в моем проекте, которую я хочу быть прокруткой горизонтально и вертикально, как This Таблица с фиксированным заголовком строки и колонки

Но мне нужно, чтобы заголовок фиксировался при прокрутке по вертикали. Я не знаю, как это сделать. Любая помощь будет оценена по достоинству.

http://jsfiddle.net/4z54E/4/

Вот мой пример HTML

<div style="overflow: scroll; width: 300px;height:300px;"> 
     <table class="myTable tablesorter" style="width:100%;" id="table"> 

      <thead style=" font-size: 13px;height: 70px;"> 
       <tr> 
        <th style="width:25px;cursor:pointer;" class="header">Title1</th> 
        <th style="width:25px;cursor:pointer;" class="header">Title2</th> 
        <th style="width:25px;cursor:pointer;" class="header">Title3</th> 
        <th style="width:60px;cursor:pointer;" class="header">Title4</th> 
        <th style="width:150px;cursor:pointer;" class="header">Title5</th> 
        <th style="width:60px;cursor:pointer;" class="header">Title6</th> 
        <th style="width:150px;cursor:pointer;" class="header">Title7</th> 
        <th style="width:60px;cursor:pointer;" class="header">Title8</th> 
        <th style="width:150px;cursor:pointer;" class="header">Title9</th> 
        <th style="width:60px;cursor:pointer;" class="header">Title10</th> 
        <th style="width:150px;cursor:pointer;" class="header">Title11</th> 
       </tr> 
      </thead> 
      <tbody style="font-size: 0.7em;"> 

       <tr bgcolor="#FFFFFF"> 
        <td>Test data</td> 
        <td>Test data</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data</td> 
        <td style="white-space:nowrap;">Test data</td> 
       </tr> 
       <tr bgcolor="#FFFFFF"> 
        <td>Test data</td> 
        <td>Test data</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data</td> 
        <td style="white-space:nowrap;">Test data</td> 
       </tr> 
       <tr bgcolor="#FFFFFF"> 
        <td>Test data</td> 
        <td>Test data</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data This has long text</td> 
        <td style="white-space:nowrap;">Test data</td> 
        <td style="white-space:nowrap;">Test data</td> 
       </tr> 

      </tbody> 
     </table> 
    </div>

источник

2013-11-19 Marikkani Chelladurai

Если это сообщение IE7 Я думаю, вы должны просто иметь возможность использовать 'position: fixed;' Иначе, если вы проектируете n чтобы быть совместимым для более старых версий IE, вам, вероятно, потребуется изучить решение JS. – MLeFevre

@Pete Его основано на DIV, но его необходимо в таблице. Можно ли это сделать в таблицах? –

ОК, я пытался, что то, что я был в состоянии сделать ^^»

position:fixed;

http://jsfiddle.net/TheBakaTensai/CfEyn/

источник

2013-11-19 11:54:54

@ вaka Спасибо за ваши усилия, но вы можете видеть, что заголовок сжимается по ширине, когда вы изменяете размер окна результатов. –

Таблица с фиксированным заголовком строки и колонки

ответ

Смежные вопросы