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

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …

アーカイブ