固定div内的标题表,水平和垂直滚动

时间:2017-03-16 10:38:34

标签: jquery html css css-position fixed-header-tables

我有一张表格,其中td列符合contenteditable =' true'。如果编辑该字段,该列可能会变宽。我需要为固定标题表添加内容的水平和垂直滚动。我尝试了许多固定的插件插件,但没有任何帮助。

JSFiddle链接:

JSFIddle

HTML:

<div id="outdiv">
    <table border="1" id="billingResult" >
        <thead>
            <tr> 
                <th>Month</th>
                <th>Date</th>
                <th>Location</th>
                <th>Country</th>
                <th>Type</th>
                <th>Serial</th>
                <th>KKL</th>
                <th>Period</th>
                <th>Service ID</th>
                <th>Assign Code</th>
                <th>State</th>
                <th>Validation</th>
                <th>Validator</th>
                <th>Select Code</th>
                <th>LMI</th>
                <th>ABI</th>
                <th>Rate</th>
                <th>Old Rate</th>
                <th>Update Time</th>
                <th>Update Person</th>
                <th>Comments</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
            <tr> 
                <td contenteditable='true'>January</td>
                <td contenteditable='true'>01-01-2016</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>US</td>
                <td contenteditable='true'>KLM45FG</td>
                <td contenteditable='true'>0236DG0478</td>
                <td contenteditable='true'>1234</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>LOK96310</td>
                <td contenteditable='true'>AD</td>
                <td contenteditable='true'>RT</td>
                <td contenteditable='true'>Done</td>
                <td contenteditable='true'>John</td>
                <td contenteditable='true'>SL</td>
                <td contenteditable='true'>000111111111LKAMDJDKDJDDK222555</td>
                <td contenteditable='true'>039DG0</td>
                <td contenteditable='true'>55</td>
                <td contenteditable='true'>96</td>
                <td contenteditable='true'>01-01-2016 15:36:23</td>
                <td contenteditable='true'>Rob</td>
                <td contenteditable='true'>-</td>
                <td contenteditable='true'>-</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

#outdiv  { 
  height:250px; 
  overflow:auto; 
}

table tr > td { 
  white-space: nowrap;
  padding: 5px;
}

需要帮助!

1 个答案:

答案 0 :(得分:0)

检查这个新的Sticky Table jQuery插件。它完全响应并且不依赖于单元格的内容,因此您可以根据需要进行编辑。它支持垂直和水平滚动。