skillup

技術ブログ

デザイン

tableのレイアウトに関して

投稿日:

tableのcssに関して。

https://github.com/umanari145/css

幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。

詳しくはリンクのtable.htmlを参考に。

思いついたことのメモなど。

  • tableのサイズは動的に決めると大変(内包要素のコントロールが大変?)
  • 最終的には内部要素で決まってくるので完全に幅をコントロールするのは難しい?

ヘッダー固定してスクロールするタイプに関して。一番簡単なのは下記リンク。

解像度が小さかったり、ブラウザを縮小した時にテーブルが自動で縮むタイプだったので、(CSSフレームワークを使っていたから?)ヘッダーとデータの罫線がずれて大変だったんですが、崩れていない時の幅を取得し、その幅を

と設定することで解決。一般のwidthなどではth,tdも含めてコントロールが効きませんでした・・

一般的にはjQueryでやるのがいいのかも・・・

Tableのヘッダ固定を行うCSS & JQuery

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

アーカイブ