3

モデルダイアログ内に次のテーブルがあり、cssを適用して、スクロール時にヘッドが同じ位置に留まるようにします。

ただし、ページを読み込んだ後、列が左にプッシュされ、これらの 5 つの列がヘッダーの下に表示されます。

また、下にあるページもページの左側にプッシュされています。

               <style>
                    .tblSearchMedia1 tbody {
                    height: 100px;
                    overflow: auto;
                        }
                    .tblSearchMedia1 td {
                    padding: 3px 10px;
                    }

                    .tblSearchMedia1 thead > tr, tbody{
                    display:block;

                    }
                </style>


                <table class="tblSearchMedia1">
                <thead>
                    <tr>
                        <th> Region </th>
                        <th> Subregion </th>
                        <th> Country </th>
                        <th> Media Type </th>
                        <th> Media Name </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: MediaGroups">
                    <tr>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text:ID"></td>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text: ID"></td>
                    </tr>
                </tbody>
            </table>

ここに画像の説明を入力

拡大画像へのリンク

4

2 に答える 2

2

これで問題が解決するかどうかを確認してください: http://jsfiddle.net/javitube/DLjLn/1/

    .tblSearchMedia1
    {
        width:500px;
    }
    .tblSearchMedia1 tbody {
        height: 50px;
        overflow:auto;
        display:block;
        width:100%;
    }

    .tblSearchMedia1 thead th, .tblSearchMedia1 tbody td
    {
        width: 100px;
    }
    .tblSearchMedia1 td {
        padding: 3px 10px;
    }
    .tblSearchMedia1 thead > tr {
        position:relative;
        display:block;
    }
于 2013-07-11T15:02:14.003 に答える
0

そのため、CSS を変更し、例を簡単に作成できるように一般的なセレクターを使用しました。

body {
    margin: 0;
    padding: 0;
}
table {
    border-collapse:collapse;
}
th, td {
    border:1px solid black;
}
.tblSearchMedia1 thead {
    position: absolute;
    width: 525px;
}
.tblSearchMedia1 tbody {
    width: 525px;
    height: 100px;
    overflow: auto;
}
.tblSearchMedia1 th {
    background: #000000;
    color: #ffffff;
}
.tblSearchMedia1 tbody {
    position:absolute;
    top: 50px;
}
.tblSearchMedia1 th, td {
    width: 75px;
    padding: 3px 10px;
    text-align: center;
}

セット幅を割り当て、広告の位置を固定に設定しました。

ここに作業フィドルがあります。

親 DOM のスクロール時にヘッダーがフローティングしないようにフィドルを更新しました。

http://jsfiddle.net/wuwdY/7/

于 2013-07-11T15:18:42.660 に答える