Прокручиваемый стол

В 2005 году Stu Nichols опубликовал this entry о наличии фиксированного заголовка с прокручиваемыми строками в таблице.Прокручиваемый стол

Есть ли более обновленное решение этой задачи, или то, что Stu написал в 2005 году, по-прежнему считается последним?

источник

2010-06-04 Phillip Senn

То же, что и существует AFAIK. В зависимости от того, какие браузеры вам нужно поддерживать, вы можете использовать CSS для прикрепления overflow: scroll к элементу tbody, но он официально не указан в спецификации CSS и работает только полузащитно. Firefox, похоже, это понимает, и я считаю, что Chrome тоже будет, но IE игнорирует его.

источник

2010-06-04 17:30:43

Второй способ - это то, как JQGrid обрабатывает свои прокручиваемые столы. Взгляните на демоверсии here. И, возможно, вместо воссоздания колеса вы хотели бы использовать свой метод TableToGrid. Это займет таблицу html и превратит ее в отформатированную сетку.

источник

2010-06-04 17:28:20

Если вы используете jQuery, для этого есть хороший плагин. вы можете найти его here

источник

2010-06-04 17:30:14 Ehsan

Я не знаю о вас, но мне нужны таблицы, которые могут обрабатывать динамическую ширину (и высоту). Firefox (< = 3.6) способен справиться с этим очень хорошо, и ни одна из предложенных фреймворков, похоже, не справляется с этим в чистом виде. Слишком плохо Firefox 3.7 удаляет эту функцию, как они называют это ошибка:

https://bugzilla.mozilla.org/show_bug.cgi?id=552080

Не стесняйтесь голосовать по этому вопросу, и есть ребята Firefox пересмотреть свои descition.

источник

2010-06-04 22:32:25 Andreas

У меня есть хорошее решение! Попробуйте это, если вы можете понять ... Это все о дисплее Css ...

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Ex Scrollable Table</title> 
     <style type="text/css"> 

      .divScroll 
      { 
       display:block; 
       overflow-x: hidden; 
       overflow-y: scroll; 
       -ms-overflow-x: hidden; 
       -ms-overflow-y: scroll; 
       height: 70px; 
      }    

      .Header 
      { 
       display:table-header-group; 
      } 


      .HeaderCell 
      { 
       text-align: left; 
       display: table-cell; 
      } 

      .FooterCell 
      { 
       display: table-cell; 
       text-align: left; 
      } 

      .Row 
      { 
       display:table-row;     
      } 


      .Cell 
      { 
       display: table-cell; 
      } 

      .Footer 
      { 
       display: table-footer-group; 
      } 

     </style> 

    </head> 
    <body> 
     <table>    
      <thead> 
       <tr> 
        <th class="Header"> 
         <div class="Row"> 
          <div class="HeaderCell" style="width:140px;">Column1</div> 
          <div class="HeaderCell" style="width:90px;">Column2 </div> 
          <div class="HeaderCell" style="width:190px;">Column3</div> 
          <div class="HeaderCell" style="width:100px;">Column4</div> 
         </div> 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td class="divScroll"> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 


         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 


         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 

         <div class="Row"> 
          <div class="Cell" style="width:140px;">c1</div> 
          <div class="Cell" style="width:90px;">c2</div> 
          <div class="Cell" style="width:190px;">c3</div> 
          <div class="Cell" style="width:100px;">c4</div> 
         </div> 


        </td> 

       </tr>     
      </tbody> 
      <tfoot> 
       <tr> 
        <th class="Footer"> 
         <div class="Row"> 
          <div class="FooterCell" style="width:140px;">A</div> 
          <div class="FooterCell" style="width:90px;"> B</div> 
          <div class="FooterCell" style="width:190px;">C</div> 
          <div class="FooterCell" style="width:100px;">D</div> 
         </div> 
        </th>      
       </tr> 
      </tfoot>  
     </table>   



    </body> 
</html>

источник

2014-02-11 04:19:03

[Вот скрипка] (http://jsfiddle.net/PhillipSenn/ztTmv/). Спасибо Карлосу! –

Прокручиваемый стол

ответ

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