Сделать таблицу прокручиваемой и исправить первые и последние столбцы

Question

У меня есть таблица с 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; } }
}

Хочу, чтобы я пытался достичь здесь, первый и последний столбцы должны быть исправлены, а остальные столбцы должны быть прокручиваемыми.

Проблема здесь заключается в том, что фиксированные столбцы перекрываются с другими столбцами, а другая проблема заключается в том, что вся таблица не зафиксирована в ширине родительского divhaving max-width: 630px;) его распространение.

Любая работа вокруг, пожалуйста..........

Answer 1

Ты можешь использовать freezeHeader (Простой плагин jquery для замораживания строки заголовка в HTML-таблице)

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