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の内側にネストされた 2 つを使用してもTH解決策ではありません。少なくとも外側の 1 つが を埋める必要があるためTHです。

テーブルはデータベースからデータを受け取り、どの列を表示するかはユーザー次第であるため、列の数はアプリオリに決定されません。これにより、固定幅を使用することもできなくなります。

どうすればそれを幅DIVの中央に配置できますか?TH

4

1 に答える 1

2

簡単な答え:できません。

div は絶対に配置され、ドキュメントの通常の流れから削除されるため、親の幅は影響しません。

div が親に対して絶対的である場合、それらを中央に配置できます...ただし、オーバーフローが非表示になっている #container 要素内に div が表示されるため、親の位置を相対的に設定することはできません。それらをあるべき場所まで微調整すると、それらは表示されなくなります。言うまでもなく、それらを上に固定することはできません。

特に列の数と幅が固定されていない場合、CSS のみを使用してこれを行う良い方法は考えられません。

于 2015-03-11T22:50:04.430 に答える