5

使用这个小提琴的建议，我制作了一个带有固定标题的滚动表：

<!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宽度内居中？

4

1 回答 1

2

简短的回答：你不能。

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

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

我想不出只使用 CSS 来做这件事的好方法，尤其是在列的数量和宽度不固定的情况下。

于 2015-03-11T22:50:04.430 回答