Hatena::ブログ(Diary)

ゆちの備忘録

2016/02/16

CSS-Tableのヘッダ・フッタ・列の固定(縦横スクロールも)

やりたかったのは、縦・横スクロール付きのヘッダ固定テーブル。(ヘッダ1行・ヘッダ複数行、列固定は無し)で、

こちらの記事がとても参考になったのでメモ。

→CSSとjavascript(jQuery)を使ってやる方法


これを参考にして自分アレンジしたのが↓↓

※スクロールバーの位置がちょっとおかしい(セルに少しかぶる)のでもうちょっと調整した方が良いかも

▼css(自作サンプル)


▼script(要-jQuery)


▼HTML

2014/05/30

2013/07/24

CSS−IEでのmin-height、min-width

IEでの min-height や min-width のメモ

■min-height

.box1 {

min-height:100px;

height: auto !important;

height: 100px;

}

■min-width

.box2 {

min-width:100px;

width: auto !important;

width: 100px;

}

とすると良いみたい。まだテストしてないけど…

※参考:IEで、min-widthやmax-widthを実現する方法

※参考:CSSでmin-heightをクロスブラウザにする最も簡単な方法

2012/07/20

CSS−Tableのヘッダ固定

tableのヘッダ固定については、今までexpressionを使った方法で指定していたんですが

IE8(標準モード)からは対応してないようなので、他の方法を試してみた結果、

こちらで紹介されていたやり方が一番しっくりきたのでメモ。

 紹介されているサンプルはヘッダが1行の場合。ヘッダが複数行の場合は、theadにheight設定すると上手くいきました。

 注)doctypeの種類によっては効かない


※訂正 2013.1.25※ヘッダが複数行の場合

ヘッダが複数行の場合は、theadにheight設定よりもやはり

thead内のthやtdにそれぞれ高さ指定しておいた方が良さそう。

theadにheight設定だけだと、閲覧環境によってはイマイチな表示に…

ex)

IE9,FF,chromeだとO。th,tdの高さはtheadのheightに合わせて自動調整されるみたいです

IE8だと△。th,tdの高さが未指定なのでペッタンコな行に。

※参考:CSS Expressions のサポート終了について

▼css(自作サンプル)

▼html

2011/07/22

CSS-IEでmax-widthみたいなこと

最大表示サイズを指定するのに、CSSで

max-width:**px;

max-height:**px;

と指定しますが、IEでは効きません。トホホ。(FirefoxとChromeは○)

でもやりたいよ!ってことで調べてみました。

※画像のwidthが500px以上なら、表示サイズは500px。

 そうでない時は、そのままのサイズで表示。


で、タグの方は