2

次のcssを使用してヘッドを修正しようとすると、次の形式のテーブルがあります。位置合わせが失われ、テーブルヘッダーと本体が適切に位置合わせされていません。これを克服するにはどうすればよいですか。

#ex_table
{

table-layout: fixed !important;
}

#ex_table thead tr
{
position: fixed !important;

}

これがHTML部分です

<div class="table_div" style="height:400px;width:98%;overflow:scroll">
<table  id="ex_table">
/*thead and tbody populated dynamically via jquery datatables*/
<tfoot id="ex_footer">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot> 
</table>
</div>
4

5 に答える 5

2

You got to set width to your cells strictly:

th, td { width:30px }

于 2012-11-07T08:31:48.837 に答える
1

答えはそれほど単純ではなく、多くの作業が必要です。position: fixedテーブルを操作するときに期待どおりに機能しないため、別のアプローチが必要になります

これは、Webを少し検索してまとめたJSFiddleですhttp://jsfiddle.net/UWS6N/1/

また、これはStackoverflowで見つかりました。これはすでに回答されている質問であり、いくつかの質問が含まれていますjQuery。個人的には、CSS高速であるため、このようなことを行うのが好きです。

ユーザーが jQuery を使用してビューの外にスクロールしたときにテーブル ヘッダーが上部に固定されるようにする

また、<th>ヘッダー行のみにタグを予約してください<thead>。その特定の行のコンテナーとして使用すると、コードの読みやすさが向上し、それらを に配置すること<tfoot>は標準違反です (この表現は少し厳しいことは知っていますが、私は標準の支持者であり、悪いコードを見ると少し神経質になる傾向がありますが、それはおそらく私だけです)

于 2012-11-07T08:48:43.053 に答える
1

テーブルの幅として表の行幅を設定します。

#ex_table thead tr
{
  width:98%;
  position: fixed !important;
}
于 2012-11-07T08:44:26.837 に答える
0

@RomanTheGreatと@Smiterによって証明されたソリューションを組み合わせて、以下のようにCSSを作成しました...

#ex_table
    {
    table-layout: fixed !important;
    }
    #ex_table thead tr
    {
     width:500px !important;
     position: fixed !important;
    }
    #ex_table tbody tr
    {
     width:500px!important;
    } 
    #ex_table th, td { width:100px; }
于 2012-11-08T04:56:22.203 に答える
0

固定配置では、ユーザーがページのどこにいても、ビューポート内の同じ場所に要素が保持されます。したがって、TR でこのプロパティを使用すると、TR はすべてビューポート (ブラウザー ウィンドウ) の左上隅に積み上げられます。

于 2012-11-07T08:32:59.460 に答える