Сделать таблицу прокрутка и исправить первый и последний столбцы

У меня есть таблица с ниже HTMLСделать таблицу прокрутка и исправить первый и последний столбцы

<div class="wrapper"> 
    <div class="tblWrapper"> 
     <table id="tbl"> 
      <thead> 
       <tr> 
        <th class="first">header</th> 
        <th>header</th> 
        <th>header</th>...........<th class="last">header n</th>       
       </tr> 
      </thead> 
      <tbody> 
       <tr><td class="first"></td><td></td><td></td><td class="last"></td></tr> 
      </tbody> 
     </table> 
    </div> 
</div>

CSS

.wrapper{ position: relative; } 
.tblWrapper{ 
    width: 98%; 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 

    #tbl{ .first, .last{ position: absolute; } } 
}

Хочет я пытаюсь достичь здесь первая и последние столбцы должны быть закреплены и остальная часть столбцов должна быть прокручиваемой.

Проблема состоит в том, что фиксированные столбцы перекрываются с другими столбцами , а другая проблема - целая таблица не фиксирована в родительской ширине div (having max-width: 630px;).

Любые работы вокруг пожалуйста ..........

источник

2014-09-01 user2486535

смотреть на это [статья] (http://anaturb.net/csstips/sheader.htm) – Farshad

это отличается от моего дела. ...... Farshad – user2486535

пытаются использовать ' ... <цв ширина = "100px"/> ' сразу после ''

тег в Преве nt столкновение – Farshad

ответ

Вы можете использовать freezeHeader (Простой JQuery плагин заморозить строку заголовка в HTML таблице) Reference

HTML:

<div class="wrapper"> 
    <div class="tblWrapper"> 
     <table id="tbl"> 
      <thead> 
       <tr> 
        <th class="first">header</th> 
        <th>header</th> 
        <th>header</th> 
        <th class="last">header </th>       
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>txt</td> 
        <td>txt</td> 
        <td> txtxtxtxtxtxtxtxtxt txtxtxtxtxtxtxtxtxt txtxtxtxtxtxtxtxtxt</td> 
        <td>txt</td> 
       </tr> 

       ... 
       ... 
       ... 

       <tr> 
        <td>txt</td> 
        <td>txt</td> 
        <td>txt</td> 
        <td>txt</td> 
       </tr> 

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

CSS:

thead tr th { 
    border-top: 1px solid #E2E6E6; 
    border-bottom: 3px solid #E5E5E5; 
    vertical-align: middle; 

} 
th { 
    color: white; 
    background:gray; 
} 
th, td { 
    text-align: left; 
    padding: 5px 10px; 
    border-bottom: 1px solid #E5E5E5; 
}

Сценарий:

$(document).ready(function() { 
     $("#tbl").freezeHeader(); 
    })

Jsfiddle demo

источник

2014-09-01 07:01:04 Farshad

не работает. Я могу исправить столбцы, добавив абсолютную позицию. Но проблема в том, что ячейки перепутаны (поверх lapped). Если мы переместим их, добавив некоторое позиционирование, оно выйдет за пределы ширины. Главное - избегать перекрытия и ограничивать прокручиваемую таблицу до ширины данного родителя. – user2486535

попробуйте использовать этот плагин: [FixedHeaderTable] (http://www.fixedheadertable.com/) – Farshad

Я редактировал код с помощью 'freezeHeader' jquery plugin – Farshad

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