jquery - div 内の固定ヘッダー テーブル、水平および垂直スクロール

Question

contenteditable='true' の td 列を持つテーブルがあります。フィールドが編集されると、その列が広くなる場合があります。コンテンツの水平スクロールと垂直スクロールを備えた固定ヘッダーテーブルが必要です。多くの固定ヘッダー プラグインを試しましたが、役に立ちませんでした。

JSFミドルリンク:

JSFドル

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;
}

助けが必要です！