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

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

アーカイブ