背景:表の残りの部分を垂直方向にスクロールしながら見出しを固定するスクロール可能な表を作成する方法を調べた後、jsfiddleというサイトでカスケードスタイルシートが見つかりました。ネットdiv内部のCSSテキストアラインメントセンターが無視されました
私はいくつかの変更を行い、ここで私のCSSでいます
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 50px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:25px;
width:750px;
box-shadow: 0 0 15px #333;
}
div.container {
overflow-y: auto;
height: 0px;
}
table {
border-spacing: 0;
width:98%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
padding: 5px 5px;
}
th {
height: 0;
text-align: center;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding-top: 5px;
margin: auto;
/* margin-left: -5px; */
text-align: center;
top: 0;
line-height: normal;
border-left: 2px solid #F88;
}
div.secondrow{
position: absolute;
background: transparent;
color: #fff;
padding-top: 5px;
margin: auto;
/* margin-left: -5px; */
text-align: center;
top: 25px;
line-height: normal;
border-left: 2px solid #F88;
}
th:first-child div{
border: none;
}
HTMLで次のように動作します。高さがあることを
<section id="mySection" class="">
<div id="myDiv" class="container">
<table id="myTable"></table>
</div>
</section>
注意スタイルシートで0に設定され、データはjavascriptによって埋め込まれ、その時点でテーブルの高さが適切なサイズに設定されます。 (800px)。
コメントアウトされた余白-5pxは、ヘッダーの罫線が表の罫線の右にわずかにあることを意味します。しかし、私は別の答えの提案として自動車をしました。
しかし、それでも動作しません。私は& nbspをヘッダー名に入れなければなりませんでしたので、境界まで盛り上がらないようにしました。 (私は中央揃えが必要なので、左パディングを削除しました)。
私が指摘しなければならないことの1つは、目に見えるテキストが実際にはパートにはなくネストされたテキストであるということです。私は完全にあなたのテーブルの構造を変更することをお勧め
<th><div class="secondrow"> Prev</div></th>
あなたが作業例を作ることはできますか?また、 'th:'内の 'div'に' position:absolute'を適用すると、 'text-align:center'は動作しません。 – nashcheez
私はその位置を推測しました。テーブルの残りの部分とスクロールするのを止めるには、絶対的なものが不可欠です。私がそれを取り除くとどうなるか見てみましょう。 – CashCow
私は他のいくつかの位置属性を試しました:スティッキー、静的など。アラインメントは機能しますが、スクロールはしません。だから私は何を使うべきですか? – CashCow