生成表滚动和修复第一和最后一列

我有一个表下面的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

生成表滚动和修复第一和最后一列

回答

相关问题