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样式，我的表格看起来像这样，但标题不固定。我希望表看起来像这样，但我只需要修复标题...

无法获得固定的表头工作，需要在x和y方向滚动？

0 个答案: