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