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)。
関連記事
-
-
レスポンシブ対応で右カラムのコンテンツを上に表示させる方法
レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...
-
-
jQueryとCSSで指定したテキストに対してラインマーカーを引く方法
サイト内で強調したいテキストに対して蛍光ペンでマーカーを引くようなアニメーション ...
-
-
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...