DIV浮动在TH之上,用于具有固定标题的滚动表,但我无法将标题居中

Question

DIV浮动在TH之上,用于具有固定标题的滚动表,但我无法将标题居中

使用这个小提琴的建议我做了一个固定标题的滚动表:

<!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>

Run Code Online (Sandbox Code Playgroud)

滚动工作顺利,您可以在https://jsfiddle.net/Marco_Bernardini/h8ukwf3w/4/上进行测试,但它有美学问题:列的标题不居中.

的TH高度将被设置为0和它的边框将被删除:现在有一个丑陋的颜色只是看到它在调试阶段.

我测试了许多解决方案,其中一些在小提琴中被评论:

以width: -moz-available;每头开始在正确的位置,但它们都终止于表的右侧; 我添加了opacity: 0.5;所以这个行为可以清楚地看到
与width: 100%;该DIV取不的父整个表的宽度,TH
有width: inherit;没有任何反应(在DIV里面的TH不继承的TH宽度)
在margin-left: auto; margin-right: auto;招不给结果

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

列数不是先验确定的,因为该表将从数据库接收数据,并由用户决定将显示哪些列.这也阻止我使用固定宽度.

我怎样才能DIV在TH宽度内居中？

Answer 1

psc*_*ler 2

简短的回答：你不能。

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

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

我想不出只使用 CSS 来做到这一点的好方法，特别是如果列的数量和宽度不固定的话。

归档时间：	11 年，6 月前
查看次数：	635 次
最近记录：	11 年，6 月前