生成表滾動和修復第一和最後一列

我有一個表下面的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 2014-09-01 06:43:58

這是從我的情況不同。 ...... Farshad – user2486535 2014-09-01 06:47:24

嘗試使用' ... '右後''

標籤preve nt列覆蓋 – Farshad2014-09-01 06:56:37

回答

您可以使用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

它不起作用。我可以通過添加絕對位置來修復列。但問題是單元格被搞亂了（重疊）。如果我們通過添加一些定位來移動它們，它將超出它的寬度。主要的事情是避免重疊，並將可滾動表限制爲給定的父寬度。 – user2486535 2014-09-01 07:06:56

嘗試使用此插件：[FixedHeaderTable]（http://www.fixedheadertable.com/） – Farshad 2014-09-01 07:45:17

我已經使用'freezeHeader' jquery插件編輯了代碼 – Farshad 2014-09-01 10:38:09

相關問題