DIV 浮动在 TH 上方以固定 headers 的滚动 table，但我无法将 header 居中

Question

使用 this fiddle 的建议我做了一个滚动 table 固定 headers:

<!DOCTYPE html>
<html lang='en' dir='ltr'>
<head>
    <meta charset='UTF-8' />
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <style>
        body {
            font-family: sans-serif;
            font-size: 20px;
        }

        section {
            position: relative;
            border: 1px solid #000;
            padding-top: 2em;
            background: #808;
        }

        #container {
            overflow-y: auto;
            height: 200px;
            padding-top: 1em;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
            width: 100%;
        }

        th {
            height: 10px;
            line-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            color: transparent;
            background: #0f0;
            border: 2px solid #f0f;
            white-space: nowrap;
        }

            th > div {
                position: absolute;
                background: #ff0;
                color: #00f;
                padding: 1em;
                top: 0;
                margin-left: auto;
                line-height: normal;
                border: 3px solid #805;
                opacity: 0.5;
            }

        td {
            border-bottom: 3px solid #666;
            background: #fdd;
            color: #c0c;
            padding: 1em;
        }

            td:first-child {
                border-right: 1px solid #aaa;
                font-family: serif;
                text-align: center;
            }

            td:last-child {
                border-left: 1px solid #aaa;
            }
    </style>
    <title>test</title>
</head>
<body>
    <div>

        <section>

            <div id='container'>

                <table>
                    <thead>
                        <tr class='header'>
                            <th>
                                head 100
                                <div id='h1'>head 1</div>
                            </th>

                            <th>
                                head 2
                                <div id='h2'>head 2</div>
                            </th>

                            <th>
                                head last
                                <div id='hL'>head last</div>
                            </th>

                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>Aardvark</td>
                            <td>beta<br />longer text<br />spanning on some lines</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta<br />long text</td>
                            <td>omega and something else</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>


                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega</td>
                        </tr>

                        <tr>
                            <td>alfa</td>
                            <td>beta</td>
                            <td>omega just to finish</td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </section>
    </div>
</body>
</html>

滚动运行流畅，您可以在 https://jsfiddle.net/Marco_Bernardini/h8ukwf3w/4/ 上进行测试，但它有一个美学问题：列的 header 未居中。

TH 高度将设置为 0 并且其边框将被删除：现在它的颜色很难看，只是为了在调试阶段看到它。

我测试了很多解决方案，其中一些在 fiddle:

中被注释掉了

with width: -moz-available; 每个 header 都从正确的位置开始，但它们都在 table 的右侧结束；我添加了 opacity: 0.5; 以便可以清楚地看到这种行为
with width: 100%; DIV 占用整个 table 的宽度，而不是 parent TH
与width: inherit;没有任何反应（TH中的DIV不继承TH宽度）
margin-left: auto; margin-right: auto; 技巧没有给出结果

即使在 TH 中使用两个嵌套的 DIV 也不是解决方案，因为至少外部必须填充 TH，但事实并非如此。

列数未确定先验，因为table将从数据库接收数据，由用户决定哪些列将是显示。这也阻止了我使用固定宽度。

如何让 DIV 在 TH 宽度内居中？

Answer 1

简答：你不能。

您的 div 是绝对定位的，这会将它们从文档的常规流中移除，因此父级的宽度不会有任何影响。

如果 div 相对于它们的父级是绝对的，您可以将它们居中...但是，您不能将父级的位置设置为相对的，因为 div 将出现在 #container 元素内，该元素的溢出被隐藏.如果您将它们推到它们应该在的位置，它们将不再可见。更不用说你无法将它们固定到顶部。

我想不出仅使用 CSS 来完成此操作的好方法，尤其是当列的数量和宽度不固定时。

DIV 浮动在 TH 上方以固定 headers 的滚动 table，但我无法将 header 居中

DIV floating above a TH for a scrolling table with fixed headers, but I can't center the header

html

css

tableheader