テーブルのヘッダーをまっすぐにし、リストをスクロールできるようにする必要があることが多い場合は、見やすくするために大量のデータがある場合に主に使用されます <title>固定テーブルヘッダーとスクロール可能な列の効果 - スクリプトホーム</title> <style type="text/css"> 体 { フォントファミリー: "arial"、"helvetica"、"sans-serif"、""; フォントサイズ: 9pt; マージン: 0px; スクロールバーの顔の色:#efefe7; スクロールバーのハイライト色:#ffffff; スクロールバー-3dlight-color:#a5a5a5; スクロールバーのダークシャドウの色:#a5a5a5; スクロールバーの影の色:#d6d6ce; スクロールバーの矢印の色:#003184; スクロールバーのトラックの色:#deded6; } テーブル { フォントファミリー: "arial"、"helvetica"、"sans-serif"、""; フォントサイズ: 9pt; 行の高さ: 150%; 色: #000000; } .display-tb2 { ボーダー右: #808080 1px ソリッド; ボーダートップ: #808080 1px ソリッド; 境界左: #808080 1px ソリッド; ボーダーボトム: #808080 1px ソリッド; 境界線:0; セルパディング:2; セル間隔:0; マージントップ:2px; ボーダー折りたたみ:折りたたみ; } div.tableContainer { オーバーフロー-x:自動; 幅:760ピクセル; dyn 動作:式( onscroll == null? (onscroll = function(){ if(event.srcElement.scrollLeft ==event.srcElement.oldScroll) return; var oGridBody = document.getElementById("order_GridBody"); oGridBody.style.width = parseInt(event.srcElement.clientWidth)event.srcElement.scrollLeft "px"; イベント.srcElement.oldScroll == イベント.srcElement.scrollLeft; }）：真実、 onmousedown == null? (onmousedown = function(){ if(self.currentTH != null) 戻り値; var obj = document.elementFromPoint(event.x,event.y); var objL = document.elementFromPoint(event.x - 1,event.y); if(obj.tagName.toLowerCase() == "th") { if(objL.tagName.toLowerCase() == "th") { obj = objL; } if(obj.className == "fixed") return; self.currentX = イベント.x; self.currentTH = obj.childNodes[0]; self.currentTH.setCapture(); } }）：真実、 onmouseup == null? (onmouseup = function(){ if(self.currentTH != null) { self.currentTH.releaseCapture(); self.currentTH = null; } }）：真実、 onmousemove == null? (onmousemove = function(){ if(self.currentTH != null) { var width = Math.round(parseInt(self.currentTH.clientWidth)event.x - self.currentX); if(幅 < 0) 幅 = 0; var dt = parseInt(self.currentTH.style.width) - 幅; self.currentTH.style.width = 幅; __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width); self.currentX = イベント.x; } }）：真実、 self.__resizeCell == null? (self.__resizeCell = function(idx, width){ var cell = document.getElementById("order_GridBody_Cells"); var rows = セル.childNodes; 変数 i = 0; for (var i = 0; i < rows.length; i ) { var cell = rows[i].childNodes[idx].childNodes[0]; varresetPattern = /style=[^stn] /; cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" width "'"); } }）：真実 ) } div.bodyContainer { 高さ:250ピクセル; 幅:760ピクセル; オーバーフロー-x:非表示; オーバーフロー-y:自動; } div.gridCell_standard { 幅:100ピクセル; オーバーフロー:非表示; nw:expression(this.noWrap=true); マージン左: 0px; 右マージン: 1px; パディング左: 2px; カーソル:デフォルト; } div.gridCell_narrow { 幅:30ピクセル; オーバーフロー:非表示; マージン左: 0px; 右マージン: 1px; パディング左: 2px; nw:expression(this.noWrap=true); カーソル:デフォルト; }番目 { 境界線右: #a4a6a4 1px 実線; ボーダートップ: #a4a6a4 1px ソリッド; 境界左: #a4a6a4 1px 実線; ボーダーボトム: #a4a6a4 1px ソリッド; 背景画像: url(images/default/headerbg.gif); 色:#ffffff; フォントスタイル:標準; フォントの太さ:標準; 高さ:20ピクセル; カーソル:列のサイズ変更; dyn 動作:式( ondblclick == null? (ondblclick = 関数() { var src = イベント.srcElement; if(event.srcElement.tagName.toLowerCase()!="div") { src = src.childNodes[0]; } src.style.width = ""; __resizeCell(src.columnIndex,src.clientWidth); }）：真実 ) } 番目の固定 { 境界線右: #a4a6a4 1px 実線; ボーダートップ: #a4a6a4 1px ソリッド; 境界左: #a4a6a4 1px 実線; ボーダーボトム: #a4a6a4 1px ソリッド; 背景画像: url(images/default/headerbg.gif); 色:#ffffff; フォントスタイル:標準; フォントの太さ:標準; 高さ:20ピクセル; カーソル:デフォルト; } 奇数 { 境界線右: #a4a6a4 1px 実線; ボーダートップ: #a4a6a4 0px ソリッド; 境界左: #a4a6a4 0px 実線; ボーダーボトム: #a4a6a4 1px ソリッド; 今ラップ; } さえ { 境界線右: #a4a6a4 1px 実線; ボーダートップ: #a4a6a4 0px ソリッド; 境界左: #a4a6a4 0px 実線; ボーダーボトム: #a4a6a4 1px ソリッド; } td.奇数_偶数 { 境界線右: #a4a6a4 1px 実線; ボーダートップ: #a4a6a4 1px ソリッド; 境界左: #a4a6a4 1px 実線; ボーダーボトム: #a4a6a4 1px ソリッド; 今ラップ; } td.select-cell { 境界線右: #a4a6a4 1px 実線; ボーダートップ: #a4a6a4 1px ソリッド; 境界左: #a4a6a4 1px 実線; ボーダーボトム: #a4a6a4 1px ソリッド; } 番目{ 色:#ff0000; } </style> <div class="tableContainer" id="order_Container"> <!--动态表格--> <table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order"> <tr> <td> <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> <thead> <th class="fixed"><div columnindex="0" class="gridCell_narrow">选择</div></th> <th><div columnindex="1" class="gridCell_standard">订单编号</div></th> <th><div columnindex="2" class="gridCell_standard">订货日期</div></th> <th><div columnindex="3" class="gridCell_standard">订货单位</div></th> <th><div columnindex="4" class="gridCell_standard">订单类别</div></th> <th><div columnindex="5" class="gridCell_standard">产品类别</div></th> <th><div columnindex="6" class="gridCell_standard">版本号</div></th> <th><div columnindex="7" class="gridCell_standard">订货金额</div></th> <th><div columnindex="8" class="gridCell_standard">订单状态</div></th> </thead> </table> </td> </tr> <!--<tfoot> 合計 3 ページ </tfoot>--> <tbody> <tr class="odd"> <td colspan="9"> <div id="order_GridBody" class="bodyContainer"> <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> <tbody id="order_GridBody_Cells"> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="2"></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">19</div></td> <td class="odd_even"><div class="gridCell_standard">直販</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="3"></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">19</div></td> <td class="odd_even"><div class="gridCell_standard">売買</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="4"></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">売買</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="5"></div> </td> <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">直販</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">5</div></td> <td class="odd_even"><div class="gridCell_standard">1.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="6"></div> </td> <td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td> <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">売買</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">0</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">制作部門がレビューしました</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="7"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">制作部門がレビューしました</div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="8"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">総代理店によるレビュー済み</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="9"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">32.0000</div></td> <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="10"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="11"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard"> </div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="12"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="13"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="14"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td> </tr> <tr class="even"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="15"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> <div class="gridCell_narrow"><input type="checkbox" name="id" value="16"></div> </td> <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> <td class="odd_even"><div class="gridCell_standard">-1</div></td> <td class="odd_even"><div class="gridCell_standard">配布</div></td> <td class="odd_even"><div class="gridCell_standard">キス</div></td> <td class="odd_even"><div class="gridCell_standard">10.2</div></td> <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> <div style="height:15px"></div> </div> [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
