勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

CSSのdisplayについて

      2014/07/02

よく使うdisplayだけれども、noneとblock以外で
初めて使うことがあったのでメモ。

■参考サイト
http://www.tohoho-web.com/css/prop/display.htm

■サンプル
http://sample.taitan916.info/table_row/

■ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function show_table1(){
$("#test").css({'display' : 'block'});
}
function show_table2(){
$("#test").css({'display' : 'table-row'});
}
function show_table3(){
$("#test").show();
}
</script>
<title>jQuery</title>
</head>
<body>
<h1>jQuery</h1>
<table border="1">
<tr>
<th>1</th><th>2</th><th>3</th>
</tr>
<tr id="test" style="display:none;">
<td colspan="3">テスト</td>
</tr>
</table>
<input type="button" value="click1" onClick="show_table1();">
<input type="button" value="click2" onClick="show_table2();">
<input type="button" value="click3" onClick="show_table3();">
</body>
</html>

■思ったこと
colspanでくっつけてるテーブルがあり、いつもどおり
noneからblockに変えたら表示するだろうと思ってやるも
表示崩れが発生(click1)。

色々調べたらdisplay:table-row;だとキレイに表示された(click2)。

ただ、jQuery使うならshowでよさそう(click3)。

 - CSS

  関連記事

images
CSSでプロパティの初期化

CSSでmedia screen and等を指定し、特定の場合のみプロパティの無 ...

images
CSSでfloatの解除

CSSでfloatがかかっているところを解除したかったけど、 やり方が分からなか ...

flash_player_11_icon_rgb
Flash上にHTMLの文字やリンクを重ねる方法

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...

images
フォームCSS

body { font-family : 'メイリオ',Meiryo,'MS P ...

images
上部に固定されたヘッダーメニューの作成

■やりたい事 ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...

images
固定ヘッダーメニュー

やりたかった事は、 ・6つぐらい異なるドメインのページがある ・似たような用途な ...

images
デザイン等のカラーの組み合わせを簡単に決める方法

サイト作成時にメインカラーとそれにマッチする組み合わせを考える必要があった。デザ ...

images
スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

images
ページング用CSS

div.pageNav { //これなくてもいいかも。 clear: both; ...

images
CSSで1つの要素に複数classを設定して画像を入れ替える

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...