TABLE 固定列を実装するための HTML+CSS+JS のベストプラクティス (一般的なブラウザと互換性があります)_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

TABLE 固定列を実装するための HTML+CSS+JS のベストプラクティス (一般的なブラウザと互換性があります)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:14 AM

BS アーキテクチャのエンタープライズレベルのアプリケーションでは、テーブルの数が大きい場合、ユーザーの一般的な要求は、最初のいくつかの重要な列を非常に適切に修正することです。一部の重量のある JS コンポーネントライブラリにもこの機能がありますが、この機能を実現するより簡単な方法はありますか?この一般的な解決策は、静的な Web ページまたは単純な動的ページを作成する場合、ロジックは比較的単純で、技術的には複雑ではなく、簡単に実現できます。動的関数を多く含むコンポーネントは冗長なコードを大量に記述する必要があり、単純な関数であってもイベント処理などの多くのコードが必要になります。この方法は不格好です。柔軟性が低く、良い解決策ではありません。

さまざまなシナリオでの長期間の分析と研究と実験の結果、一般的に、位置決め計算方法を使用する解決策を見つけたので、以下にコードを掲載して説明します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">function divScroll(scrollDiv){    var scrollLeft = scrollDiv.scrollLeft;    document.getElementById("tableDiv_title").scrollLeft = scrollLeft;    document.getElementById("tableDiv_body").scrollLeft = scrollLeft;        }function divYScroll(scrollYDiv){    var scrollTop = scrollYDiv.scrollTop;    document.getElementById("tableDiv_y").scrollTop = scrollTop;    }function onwheel(event){    var evt = event||window.event;    var bodyDivY = document.getElementById("tableDiv_y");    var scrollDivY = document.getElementById("scrollDiv_y");    if (bodyDivY.scrollHeight>bodyDivY.offsetHeight){        if (evt.deltaY){            bodyDivY.scrollTop = bodyDivY.scrollTop + evt.deltaY*7;            scrollDivY.scrollTop = scrollDivY.scrollTop + evt.deltaY*7;        }else{            bodyDivY.scrollTop = bodyDivY.scrollTop - evt.wheelDelta/5;            scrollDivY.scrollTop = scrollDivY.scrollTop - evt.wheelDelta/5;        }    }}</script><style type="text/css">body {margin:0;padding:0;}table {border-collapse:collapse;border:0;border:none;}table td  {border:1px solid #000;overflow:hidden;padding:0 2px;}</style></head><body><div style="width:500px; position:relative; padding-right:18px;">   <div style="position:relative;height:368px;overflow:hidden;width:100%">    <div style="padding-left:108px; width:auto;  overflow:hidden; background:#f00;" id="tableDiv_title" >    <table border="0" cellspacing="0" cellpadding="0"  >      <tr>        <td  style="min-width:30px; max-width:30px; left:0; top:0; width:30px;  overflow:hidden; background-color:#f00;position:absolute;z-index:1;">000</td>        <td  style="min-width:74px; max-width:74px; left:30px; top:0; width:74px;  overflow:hidden; background-color:#f00;position:absolute;z-index:1;">自动表格</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>        <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>      </tr>      </table>      </div>      <div style="overflow:hidden; position:absolute;height:128px; width:100%;" id="tableDiv_y" onmousewheel="onwheel(event);" onwheel="onwheel(event);">       <div style="padding-left:108px; width:auto;overflow:hidden;" id="tableDiv_body">        <table border="0" cellspacing="0" cellpadding="0" >          <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">001</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>           <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff; position:absolute; z-index:1;">002</td>            <td  style="min-width:74px; max-width:74px; left:30px; width:74px; overflow:hidden;background-color:#fff; position:absolute; z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>          <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">003</td>            <td  style="min-width:74px; max-width:74px;left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>          <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">004</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">005</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">006</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>               <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">007</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">008</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>           <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">009</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>            <tr>            <td  style="min-width:30px; max-width:30px; left:0; width:30px; overflow:hidden; background-color:#fff;position:absolute;z-index:1;">010</td>            <td  style="min-width:74px; max-width:74px;  left: 30px; width: 74px; overflow:hidden;background-color:#fff;position:absolute;z-index:1;">自动表格</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >56454自动</td>            <td  style="min-width: 100px; max-width: 100px;  width: 100px;" >最后一列</td>          </tr>                   </table>    </div>              </div>      <div style="background-color:#eee;overflow:hidden;top:150px; width:100%; z-index:2;position:absolute;">        <div style="margin-left:108px; width:auto;overflow-x:scroll;overflow-y:hidden;" onscroll='divScroll(this);'>            <div style="width:630px; height:1px;"></div>        </div>    </div>    </div>        <div id="scrollDiv_y" style="display:block; overflow-x:hidden; overflow-y:scroll; position:absolute; top:22px; right:0px; height:118px; padding-bottom:10px;" onscroll='divYScroll(this);'>            <div style="width:1px; height:194px;"></div>         </div>    </div>   </div></body></html>

总 I. 全体の構造:

ページの基本要素は div+table であり、2 つの DIV 層が外側にラップされて固定されています。 JS コントロールを介して位置を調整し、通常の DIV スクロールバーの効果をシミュレートします。

2.位置：

上部に配置される。垂直スクロールバーがあるときに正常に表示されるようにするには、テーブル本体の外側の DIV が絶対位置に設定されるため、スクロールバーも絶対位置に設定する必要があります。さらに、テーブルヘッダー、テーブル本体、およびスクロールバーの内部 DIV は、margin-left 属性を使用して左マージンを制御し、固定列のオフセットを自由のままにします。

2.幅の計算：

計算されます。テーブルヘッダーとボディの内側、幅は自動、適応テーブル幅、外側のdivの幅は100％、最外divは右を制御します。内側のマージンはpadding-right属性によって変更され、垂直スクロールバーの位置が自由になります。

3. 身長の計算:

‐ のs
to

バーは、テーブルと同じ幅の DIV と、 1 ピクセルの高さは垂直スクロールバーにも当てはまります。この形式を採用する理由は、垂直スクロールバーをこのように処理した後、テーブルヘッダーとテーブル本体の DIV 幅を計算する必要がなくなり、水平スクロールバーがより美しくなるからです。それ以外の場合、スクロールバーがある場合、テーブルのヘッダーと水平スクロールバーを垂直スクロールバーの幅だけ移動する必要があります。この計算は複雑ではありませんが、場合によっては問題が発生します。ここでは拡張されません。

5. スクロールイベント:

テーブル本体のスクロールバーが非表示になっているため、マウスホイールが機能しないため、マウスホイールイベントを処理するには JS を使用する必要があります。この記事のサンプルコードはと互換性があります。一般的なブラウザ。 6. 利点と欠点の分析:

この記事の解決策は、クリアリングの原則に重点を置いています。実際には、それは非常に複雑です。

このソリューションの利点は、コンポーネントを使用する場合、HTML 構造がシンプルであるため、JS コントロールコードが非常にクリーンで保守が容易であることです。欠点は計算量が多すぎることです。このソリューションはコンポーネントの開発により適しており、静的ページは適していないと考えられます。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

See all articles