div内部のCSSテキストアラインメントセンターが無視されました

背景：表の残りの部分を垂直方向にスクロールしながら見出しを固定するスクロール可能な表を作成する方法を調べた後、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">&nbsp;Prev</div></th>

出典

2017-02-15 CashCow

あなたが作業例を作ることはできますか？また、 'th：'内の 'div'に' position：absolute'を適用すると、 'text-align：center'は動作しません。 – nashcheez

私はその位置を推測しました。テーブルの残りの部分とスクロールするのを止めるには、絶対的なものが不可欠です。私がそれを取り除くとどうなるか見てみましょう。 – CashCow

私は他のいくつかの位置属性を試しました：スティッキー、静的など。アラインメントは機能しますが、スクロールはしません。だから私は何を使うべきですか？ – CashCow

：

だから、この時点での実際のHTMLは次のように見えます。絶対にth内部divを持っている理由はありません

：

は、スタイルシートで間違った多くのものがあります。凍結された行の
theadの高さ、th & thはゼロであり、div Sは本質的に悪い考えであることを一定keeptように操作されています。
テーブルの親のsectionには、テーブル構造の場合と同じくらい悪い最上位のdivにバックグラウンドを提供するためにpaddingが与えられています。

ここでテーブルを使用する目的はすべて、そのような構造を使用して破壊されます。

テーブル構造の考え方を改善するため、ベストプラクティスの詳細については、MDN Table articleをご覧ください。

私は凍った行でより良いテーブル構造を見つけました。より良いアイデアのためにそれを通過してください。

フィドル：https://jsfiddle.net/nashcheez/esu0m57q/3/

コードを参照してください。

table { 
 
    position: relative; 
 
    width: 100%; 
 
    background-color: #aaa; 
 
    overflow: hidden; 
 
    border-collapse: collapse; 
 
} 
 

 

 
/*thead*/ 
 

 
thead { 
 
    width: 100%; 
 
    overflow-y: scroll; 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 

 
thead th { 
 
    background-color: #99a; 
 
    min-width: 120px; 
 
    height: 32px; 
 
    border: 1px solid #222; 
 
} 
 

 
tbody { 
 
    width: 100%; 
 
    overflow: auto; 
 
    height: 300px; 
 
    display: block; 
 
} 
 

 
tbody td { 
 
    background-color: #bbc; 
 
    border: 1px solid #222; 
 
    height: 40px; 
 
} 
 

 
tr { 
 
    width: 100%; 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 

 
tbody tr td:nth-child(1) { 
 
    /*seperates the first column from the tbody*/ 
 
    background-color: #99a; 
 
}

<body> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Town</th> 
 
     <th>County</th> 
 
     <th>Age</th> 
 
     <th>Profession</th> 
 
     <th>Anual Income</th> 
 
     <th>Matital Status</th> 
 
     <th>Children</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John Smith</td> 
 
     <td>Macelsfield</td> 
 
     <td>Cheshire</td> 
 
     <td>52</td> 
 
     <td>Brewer</td> 
 
     <td>£47,000</td> 
 
     <td>Married</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jenny Jones</td> 
 
     <td>Threlkeld</td> 
 
     <td>Cumbria</td> 
 
     <td>34</td> 
 
     <td>Shepherdess</td> 
 
     <td>£28,000</td> 
 
     <td>Single</td> 
 
     <td>0</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Peter Frampton</td> 
 
     <td>Avebury</td> 
 
     <td>Wiltshire</td> 
 
     <td>57</td> 
 
     <td>Musician</td> 
 
     <td>£124,000</td> 
 
     <td>Married</td> 
 
     <td>4</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Simon King</td> 
 
     <td>Malvern</td> 
 
     <td>Worchestershire</td> 
 
     <td>48</td> 
 
     <td>Naturalist</td> 
 
     <td>£65,000</td> 
 
     <td>Married</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Lucy Diamond</td> 
 
     <td>St Albans</td> 
 
     <td>Hertfordshire</td> 
 
     <td>67</td> 
 
     <td>Pharmasist</td> 
 
     <td>Retired</td> 
 
     <td>Married</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Austin Stevenson</td> 
 
     <td>Edinburgh</td> 
 
     <td>Lothian</td> 
 
     <td>36</td> 
 
     <td>Vigilante</td> 
 
     <td>£86,000</td> 
 
     <td>Single</td> 
 
     <td>Unknown</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Wilma Rubble</td> 
 
     <td>Bedford</td> 
 
     <td>Bedfordshire</td> 
 
     <td>43</td> 
 
     <td>Housewife</td> 
 
     <td>N/A</td> 
 
     <td>Married</td> 
 
     <td>1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Kat Dibble</td> 
 
     <td>Manhattan</td> 
 
     <td>New York</td> 
 
     <td>55</td> 
 
     <td>Policewoman</td> 
 
     <td>$36,000</td> 
 
     <td>Single</td> 
 
     <td>1</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Henry Bolingbroke</td> 
 
     <td>Bolingbroke</td> 
 
     <td>Lincolnshire</td> 
 
     <td>45</td> 
 
     <td>Landowner</td> 
 
     <td>Lots</td> 
 
     <td>Married</td> 
 
     <td>6</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Alan Brisingamen</td> 
 
     <td>Alderley</td> 
 
     <td>Cheshire</td> 
 
     <td>352</td> 
 
     <td>Arcanist</td> 
 
     <td>A pile of gems</td> 
 
     <td>Single</td> 
 
     <td>0</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body>

出典

2017-02-15 17:38:16 nashcheez

そこにあったものの多くを試しましたが、カラム幅がオーバーフローしたときにデータに調整されません細胞。 – CashCow

固定された幅を持たないテーブル本体と凍結したヘッダーを一致させるのは難しいです。しかし、私はうまくいくかもしれない解決策を思いつきました。編集された回答を確認して教えてください。 – nashcheez

あなたのソリューションはjsfiddleでも動作しません。最初の要素の列をループし、ヘッダーの2番目の行に幅を設定するJavascriptで解決しました（最初にcolspan = 3があるため）。パディングをチェックしたり、調整したりする必要があります。それを正しく行うには、実際のヘッダーの幅を確認する必要があります。実際のヘッダーの幅は、テキストが収まらない場合やラップしない場合に大きくなります。 – CashCow

div内部のCSSテキストアラインメントセンターが無視されました

答えて

関連する問題