javascript - 如何从表格(由 div 组成)中制作标题是静态的还是固定的

Question

我有一个由 div 组成的表格，我想将此表格的标题设为静态或固定这是我的 jsfiddle

<div id="my-container">
    <div id="my-table">
        <div id="my-header">
            <div class="my-cell anHead" data-col="1">No</div>
            <div class="my-cell anHead" data-col="2">ID</div>
            <div class="my-cell anHead" data-col="3">ClusterId</div>
            <div class="my-cell anHead" data-col="4">CPU</div>
            <div class="my-cell anHead" data-col="5">End Time</div>
            <div class="my-cell anHead" data-col="6">I/O</div>
            <div class="my-cell anHead" data-col="7">Job Name</div>
            <div class="my-cell anHead" data-col="8">Job Number</div>
            <div class="my-cell anHead" data-col="9">Owner</div>
            <div class="my-cell anHead" data-col="10">Script File</div>
            <div class="my-cell anHead" data-col="11">QName</div>
            <div class="my-cell anHead" data-col="12">Slots</div>
            <div class="my-cell anHead" data-col="13">State</div>
            <div class="my-cell anHead" data-col="14">Task</div>
            <div class="my-cell anHead" data-col="15">Max. Virtual Memory</div>
            <div class="my-cell anHead" data-col="16">Memory</div>
            <div class="my-cell anHead" data-col="17">Start Time</div>
            <div class="my-cell anHead" data-col="18">Submission Time</div>
            <div class="my-cell anHead" data-col="19">Virtual Memory</div>
        </div>
        <div id="my-body">
            <div class="my-row">
                <div class="my-cell">1</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
            </div>
            <div class="my-row">
                <div class="my-cell">2</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
            </div>
            <div class="my-row">
                <div class="my-cell">3</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
            </div>
            <div class="my-row">
                <div class="my-cell">4</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
                <div class="my-cell">blah!</div>
            </div>
        </div>
    </div>
</div>

我遇到的问题是，当我在“position:fixed”中制作标题或单元格时，表格会中断。有什么建议吗？？？？

提前致谢

Answer 1

您可以固定表格标题的位置并向主体添加一些填充，这样您的表格头部和主体就不会重叠。

#my-header {
    width: 100%;
    display: table-header-group;
    position: fixed;
    top:0;
}

body {
    padding-top:54px;
}

这就是你想要的吗？ jsFiddle