HTML の overflow で表示しているテーブルの指定した行へスクロールさせる - yzn’s memo
こんな感じでいいのかな…… firefox 2.0.0.3 と IE6.0 だけ動作確認 <html> <head> <script language="JavaScript" type="text/javascript"> function onSelectionChanged(selection) { target = document.getElementById(selection.value); if (target == null) { return ; } scrollArea = document.getElementById("scrollArea"); scrollArea.scrollTop = target.offsetTop; } </script> </head> <body> <form name="fm" action="#" method="get"> <
ヘッダを固定してスクロールする方法 | CSS解説
対象とするテーブルではヘッダ部をthead要素内に記述し、ボディ部と分離しておきます。 <table> <thead> <tr> <th>A</th> <th>B</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> </tr> </tbody> </table> theadとtbodyをブロック要素とし、tbodyのoverflowをscrollとします。 <style type="text/css"> thead, tbody { display: block; } tbody { overflow-x: hidden; overflow-y: scroll; height: 100px; } </style> このoverflowをautoとした場合、Internet ExplorerやFirefoxではスクロールバーが右端のセ
テーブルの見出しを固定してデータ部分だけをスクロールさせる
<HTML> <HEAD> <TITLE>テーブルの表題を固定してデータ部分だけをスクロールさせる</TITLE> <script language="JavaScript"> <!-- window.onload = cngrow; function cngrow(){ //行の背景を一行おきに塗分けします。詳細はこちら var myTR =document.getElementById("myTBL").rows; for (var i=0;i<myTR.length;i++) { var v=i%2; if (v==1) { myTR[i].style.backgroundColor = "#ffccff"; myTR[i].style.color = "navy"; } } } //--> </script> </HEAD> <BODY> <TABLE cellpadding="2
CSSでヘッダを固定したスクロールテーブルを作る方法
CSSでヘッダを固定したスクロールテーブルを作る方法を紹介します。 １．はじめに 次のようなHTMLでテーブルを作成しました。 <style> table { border-collapse: collapse; border-spacing: 0; } th { background-color: #ccc; } th, td { border: 1px solid #666; padding: 5px; } .key, .value { width: 100px; } </style> <table> <thead> <tr><th class="key">キー</th><th class="value">値</th></tr> </thead> <tbody> <tr><td class="key">1</td><td class="value">aaa</td></tr> <tr>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
