手術台の列の CSS 実装

今回はcssを使ってテーブルの列を操作する方法についてお届けします。 cssを使ってテーブルの列を操作する際の注意点は何ですか？以下は実践的なケースですので見てみましょう。

はじめに

私が最近取り組んでいるバックエンド管理システムは、大量のテーブルを処理する必要があります。これは、元のプロジェクトが

forループを使用して実装されており、その結果、大量のJSコードが生成されていたためです。 ; さまざまな単一の引用符と二重引用符の入れ子が問題だったので、v-for を使用してテンプレートのレンダリングを実行し、作業負荷が大幅に軽減されました

;

テキストは強制的に改行されました いくつかのテーブルには多数の列があり、テキストが押し込まれて下に折り返されているため、シーンは強制的に改行しない方法を採用しています

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

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

そこで、水平スクロールバーを使用して中央にドラッグすることを検討しました。テーブルを分割してから、テーブルを復元するためにフローティングを使用する必要があります。次の場合は、テーブルを 3 つに分割し、それをフローティングにして復元します

ので、パーセンテージを使用します。

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

  これで、上記のケースは完成です

この記事のケースを読んだ後、あなたはそれをマスターしたと思いますさらにエキサイティングな方法については、php中国語ウェブサイトの他の関連記事に注目してください!

• 推奨読書:

css3 でのポインターイベントの使用の詳細な説明

focus-within の使用の詳細な説明

以上が手術台の列の CSS 実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。