Question

使用this fiddle的建议我制作了一个带有固定标题的滚动表：

<!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/上进行测试，但它存在美学问题：列的标题不居中。

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

简短回答： 你不能 。

您的div绝对定位，将它们从文档的常规流中移除，因此父级的宽度无效。

如果div与父母的关系是绝对的，你可以将它们居中......但是，你不能将父亲的位置设置为相对位置，因为div会出现在#container元素的内部溢出隐藏。如果你将它们推到应该的位置，它们将不再可见。更不用说你无法将它们修复到顶部。

我认为没有好的方法只使用CSS，特别是如果列的数量和宽度没有固定。

DIV浮动在TH上方，用于带有固定标题的滚动表，但我不能将标题居中

1 个答案: