Не получается получить фиксированный заголовок таблицы, нужна прокрутка в направлении x и y?

Question

Это убивает меня, и я прочитал так много потоков переполнения стека на нем, но я просто не могу понять это. У меня есть таблица, которую нужно прокрутить в направлении X и Y, у меня эта часть работает. Проблема в том, что заголовок должен быть исправлен, поэтому, когда люди прокручивают страницу вниз, они все равно могут видеть, что представляет собой каждый столбец. В настоящее время у меня есть table-layout: fixed, потому что я хотел бы, чтобы ширина была одинаковой для каждой ячейки в th/td. Строки получают динамически с помощью JS (пользователь щелкает материал на карте, и он генерирует строки для добавления в таблицу). Если я что-то сделаю с thead или tbody, то ширина столбца, установленная для th/td, больше не будет соблюдаться. Если я добавлю position: fixed в thead, он переполняет div, даже если я установлю overflow: auto на #table.

Я могу создать решение jQuery, если нужно, хотя я действительно не хочу реализовывать больше плагинов.

HTML:

<div id="attribute-table">
    <button id="selectPatches">Select Patches</button>
    <button id="clearSelection">Clear Selection</button>
    <span id="featureCount">No features selected</span>
    <div id="table">
        <table>
            <thead>
                <tr>
                    <th>State</th>
                    <th>Point</th>
                    <th>Patch Number</th>
                    <th>Is Developed?</th>
                    <th>Crop Type</th>
                    <th>Crop Residue (%)</th>
                    <th>Canopy Over 12' (%)</th>
                    <th>Deciduous Canopy (%)</th>
                    <th>Coniferous Canopy (%)</th>
                    <th>Shrub Cover (%)</th>
                    <th>Shrub Stem Density (%)</th>
                    <th>Grass Cover (%)</th>
                    <th>Forb Cover (%)</th>
                    <th>Forb Protective Cover (%)</th>
                    <th># of Forb Species</th>
                    <th>Bare Ground (%)</th>
                    <th>Herbaceous Height > 8"</th>
                    <th>Coarse Habitat Type</th>
                    <th>Fine Habitat Type</th>
                    <th>Quail Habitat</th>
                    <th>Observation Date</th>
                    <th>Observation Type</th>
                </tr>
            </thead>
            <tbody id="table-data"></tbody>
        </table>
    </div>
    <div id="attrTable-handle" class="ui-resizable-handle ui-resizable-n"></div>
</div>

Этот CSS приводит к тому, что ширины ячеек становятся все шаткими, и ничто не выравнивается правильно (заголовок все еще не исправлен с этим CSS в любом случае):

#attribute-table {
    position: fixed;
    left: 0;
    height: 250px;
    bottom: 0 !important;
    top: auto !important;
    padding-top: 7px;
    background-color: white;
    z-index: 31;
}

#attrTable-handle {
    height: 5px;
    background-color: orange;
    top: 0;
}

#attribute-table #featureCount {
    color: green;
    font-weight: bold;
    font-size: 16px;
    padding-left: 20px;
}

#table {
    height: 200px;
    width: 100%;
    overflow: auto;
}

#table table {
    table-layout: fixed;
    width: 100%;
    margin-left: 10px;
    margin-top: 10px;
}

#table thead {
    display: block;
}

#table tbody {
    display: block;
    overflow: auto;
}

#table td, #table th {
    width: 170px;
    text-align: center;
    border: 1px solid black;
}

#table th {
    background-color: lightgray;
}

Я обнаружил, что overflow: auto должно быть установлено на #table, чтобы предотвратить перетекание заголовка таблицы в div и заставить прокрутку работать должным образом. Я не хочу ставить overflow: auto на #attribute-table, так как мне нужны кнопки и тому подобное, чтобы они оставались зафиксированными сверху. Только таблица должна быть прокручиваемой.

Если я удаляю стили #table thead и #table tbody, моя таблица выглядит следующим образом, но заголовок не фиксируется. Я хочу, чтобы таблица выглядела именно так, но мне просто нужно исправить этот заголовок ...