純粋な CSS を使用してテーブルの固定列とテーブルのヘッダーの間の水平スクロールを実装する方法の例

この記事では、純粋な CSS を使用してテーブルの固定列とテーブル ヘッダーを実現する方法、および中央の水平スクロールについての関連情報を主に紹介します。この記事では、サンプル コードを通じてこの効果を実現するためのアイデアと方法を詳しく紹介します。勉強や仕事に役立つ情報が必要な場合は、以下を参照してください。

はじめに

私が最近取り組んでいるバックグラウンド管理システムは、元のプロジェクトが for ループと文字列の連結を使用して実装されており、その結果、さまざまな JS コードが生成されるため、大量のテーブルを処理する必要があります。一重引用符と二重引用符のネストが問題だったので、vue.js を導入して、作業負荷が大幅に軽減され、快適になりました

列がたくさんあるため、テキストが押し込まれて下向きに折り返されているため、強制的に行を折り返さない方法を採用しています

<style>
p{
     white-space: nowrap;//强制不折行
}
</style>

新しい問題は、強制した後のことです。行の折り返しにより、全体の幅が本文を超えます

そこで、テーブルの重要な列を固定することを検討しました。水平スクロールバーを使用して中央にドラッグします

• 列を固定する必要があることを考慮して、テーブルを分割する必要がある; その後、テーブルをフロートを使用して復元できます。テーブルを 3 つに分割してから、それを復元するだけです

• パーセンテージを使用する必要があることを考慮します。

<style>
p{
    white-space: nowrap;
    overflow: hidden;//控制溢出隐藏
    overflow-x: scroll;//设置横向滚动条
}
</style>

ということで、上記のケースは完了です

もう一つあります。中央のテーブルのヘッダーも固定する必要があり、下のボディと一緒にスライドできません。ここで採用したアイデアは、位置決めを使用することです。上記はすべてパーセンテージで行われるため、位置決めの左側の値もパーセンテージになります。コード

は行いません。

以上が純粋な CSS を使用してテーブルの固定列とテーブルのヘッダーの間の水平スクロールを実装する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。