jquery - 最初の行の固定ヘッダーを作成します

Question

デモ

<div id="divScroll" style="overflow-x: hidden">
    <table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">

            <tr>
                <td class="csstextheader" width="70px"></td>
                <td class="csstextheader" width="70px">
                    <b>Time Slot&nbsp;</b>
                </td>
                <td><b>Room 7</b></td>
                <td><b>Room 8</b></td>
                <td><b>Room 9</b></td>
                <td><b>Room 10</b></td>
            </tr>



            <tr class="csstablelisttd">
                <td width="70px">08:00AM</td>
                <td>00</td>
                <td class="csstdred">John</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>                                     
            </tr>
    </table>
</div>

ウィンドウのオンロードを呼び出す

function resolutionIndependent()
        {
            var height;
            var tableMain;
            var divScroll;

            if (document.body && document.body.offsetWidth)
            {
                height = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth)
            {
                height = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight)
            {
                height = window.innerHeight;
            }
            tableMain = document.getElementById('tableMain');
            divScroll = document.getElementById('divScroll');
            tableMain.style.height = parseFloat(height - 170) + 'px';
            divScroll.style.height = parseFloat(height - 170) + 'px';
            divScroll.style.overflow = "auto";
        }
 //***tableMain which is outer table of divScroll***

最初の行の固定ヘッダーを作成する必要があります..最初の行style="position:fixed"のすべてのセルに追加しています。しかし、出力が得られない..それがどのように可能か

Answer 1

HTMLコードを変更せずに結果を得る簡単なjquery関数を使用することもできます

var tdWidth = $("#tableAppointment tbody tr td").width();
$("#tableAppointment thead").css({'position': 'fixed','top': '0','left': '-0.2%', 'background-color': '#f94d4d','color': '#FFFFFF','text-align': 'center','width': '100%'});

$("#tableAppointment thead tr th").width(tdWidth);

実際の例はjsfiddleです

Answer 2

私はあなたの質問のための簡単なコーディングを作成しました。実際の動作を確認するには、以下を参照してください：http: //jsfiddle.net/john_rock/h6hfX/1/

HTMLパート：

<table>
<thead>
<tr><th>Head1</th><th>Head2</th><th>Head3</th><th>Head4</th><th>Head5</th><th>Head6</th></tr>
</thead>
<tfoot>
<tr><td>Foot1</td><td>Foot2</td><td>Foot3</td><td>Foot4</td><td>Foot5</td><td>Foot6</td></tr>
</tfoot>
<tbody>
<tr><td>r1c1</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td></tr>
<tr><td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td></tr>
<tr><td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td></tr>
<tr><td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td></tr>
<tr><td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td></tr>
<tr><td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td></tr>
<tr><td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td></tr>
<tr><td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td></tr>
<tr><td>r9c1</td><td>r9c2</td><td>r9c3</td><td>r9c4</td><td>r9c5</td><td>r9c6</td></tr>
<tr><td>r10c1</td><td>r10c2</td><td>r10c3</td><td>r10c4</td><td>r10c5</td><td>r10c6</td></tr>
<tr><td>r11c1</td><td>r11c2</td><td>r11c3</td><td>r11c4</td><td>r11c5</td><td>r11c6</td></tr>
<tr><td>r12c1</td><td>r12c2</td><td>r12c3</td><td>r12c4</td><td>r12c5</td><td>r12c6</td></tr>
<tr><td>r13c1</td><td>r13c2</td><td>r13c3</td><td>r13c4</td><td>r13c5</td><td>r13c6</td></tr>
<tr><td>r14c1</td><td>r14c2</td><td>r14c3</td><td>r14c4</td><td>r14c5</td><td>r14c6</td></tr>
<tr><td>r15c1</td><td>r15c2</td><td>r15c3</td><td>r15c4</td><td>r15c5</td><td>r15c6</td></tr>
</tbody>
</table>​

CSSパート：

table {width:100%; border:1px solid #000000;}
thead {background-color:#000268;color:#FFFFFF;text-align:center; position:fixed; top:0px;}
thead th { height:50px; width:120px; text-align:center;border-width: 1px;border-style: outset;}
tbody {color:#000000;text-align:center; height:150px; overflow: scroll; margin:0px;}
tbody td { height:60px; width:100px;border-width: 1px;border-style: outset;}
tfoot {background-color:#000268; color:#FFFFFF;text-align:center; position:fixed; bottom:0px;}
tfoot td { height:50px; width:120px; text-align:center;border-width: 1px;border-style: outset;}​

これはあなたの問題を解決するのに役立つと思います。

注：これはあなたの質問の回答例です。

Answer 3

jQueryを使用する場合は、最初にテーブルを複製します

var clone  = $('.tableAppointment').clone()

次に、クローン内の不要な部分/クローンとなる固定ヘッダーに表示されない部分を削除します

clone.remove('.csstablelisttd')

次に、両方のヘッダー (クローンとオリジナルが表示されている) が混乱しないように、テーブルで修正することがサポートされている部分を非表示/削除し、必要な場所を参照するために使用するクラスをオリジナルに追加します。クローンを追加する（その前に）

$('.tableAppointment').remove('.firstrowclassname').addClass('beforeHeader') 
//you have not given the 1st row an ID/class, you need to, for refering in jQuery

クローンに固定ヘッダー CSS スタイルを与え、if を元のヘッダーの前に置きます

clone.css({position: fixed}).insertBefore('.beforeHeader')

あなたが基本的に行ったことは、2つのヘッダーを作成し、一方から修正するサポートの部分を削除し、もう一方から修正しない部分を削除し、テーブルのスタイリングを失うことなく両方を一緒に表示することです。今回は1つだけですテーブルが固定され、目的の行を持つテーブル

Answer 4

jqGridのようなjQueryプラグインを使用できますか？

また、最初の行がヘッダーであることが意図されている場合は、テーブルヘッダータグを使用する必要がありますth

Answer 5

css を使用できますか? 私は簡単な答えを持っています...:first-childこのようなセレクターを使用してください

thead tr:first-child {
   position:fixed;
}

これは試す準備ができていない単なる例です...要素で前に変更してください...頑張ってください

Answer 6

試す ：

 <thead>
    <tr  style="position: fixed; background-color: grey;">
        <td class="csstextheader" width="70px"></td>
        <td class="csstextheader" width="70px">
            <b>Time Slot&nbsp;</b>
        </td>
        <td><b>Room 7</b></td>
        <td><b>Room 8</b></td>
        <td><b>Room 9</b></td>
        <td><b>Room 10</b></td>
    </tr>
</thead>

最初の行を固定位置にし、css を使用してすべてのセルの幅を追加するとうまくいきます