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

backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで Contents1 背景画像の位置 background-postion2 背景画像のサイ …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

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

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

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …