- PR -

固定heightページにグリッド

«前のページへ 1|2
投稿者投稿内容
MMX
ぬし
会議室デビュー日: 2001/10/26
投稿数: 861
投稿日時: 2006-07-25 18:05
検索語

HTML TABLE スクロール

で、いろいろ出ます、基本は同じで
css レイアウト属性の固めかた、Javascriptの扱い、さまざま。
-------------
ＩＥも ie互換モードと w3c標準モードの違いの話とか、IE7ベータとか、こまごま
CSS実装徹底検証! そこが知りたいInternet Explorer 7
http://journal.mycom.co.jp/special/2006/ie7beta2/index.html
20 ページもある

[ メッセージ編集済み 編集者: MMX 編集日時 2006-07-27 09:17 ]
かんぱち
ベテラン
会議室デビュー日: 2006/06/01
投稿数: 73
投稿日時: 2006-07-25 22:28
皆様ありがとうございまする〜。
返事が遅れまして申し訳ありません。

かつのり様様
ソースはこんな感じです。。
<table width="900" cellSpacing="0" cellPadding="2" bgcolor="#999999" border="0">
<tr class="stitle">
　<td width="42" style="border-top-width: 1px;border-top-style : solid;border-top-color: #999999;border-left-width: 1px;border-left-style : solid;border-left-color: #999999;border-right-width: 1px;border-right-style : solid;border-right-color: #999999;">&nbsp;</td>
　<td width="110" style="border-top-width: 1px;border-top-style : solid;border-top-color: #999999;border-right-width: 1px;border-right-style : solid;border-right-color: #999999;">らん１</td>
　<td width="130" style="border-top-width: 1px;border-top-style : solid;border-top-color: #999999;border-right-width: 1px;border-right-style : solid;border-right-color: #999999;">らん２</td>
　<td width="80" style="border-top-width: 1px;border-top-style : solid;border-top-color: #999999;border-right-width: 1px;border-right-style : solid;border-right-color: #999999;">らん３</td>
　<td width="130" style="border-top-width: 1px;border-top-style : solid;border-top-color: #999999;border-right-width: 1px;border-right-style : solid;border-right-color: #999999;">らん４</td>
　<td width="280" style="border-top-width: 1px;border-top-style : solid;border-top-color: #999999;border-right-width: 1px;border-right-style : solid;border-right-color: #999999;">らん５</td>
　<td width="128" style="border-top-width: 1px;border-top-style : solid;border-top-color: #999999;border-right-width: 1px;border-right-style : solid;border-right-color: #999999;">らん６</td>
</tr>
</table>
↑表題部

↓一覧部
<div style="width:900px;height:451px;overflow-y:auto">
　<table width="900" cellSpacing="1" cellPadding="2" bgcolor="#999999" border="0">
　　<tr bgcolor="#FFFFFF">
　　　<td width="40" align="center">ああああ</td>
　　　<td width="110">いいいい</td>
　　　<td width="130">うううう</td>
　　　<td width="80" align="center">ええええ</td>
　　　<td width="130">おおおお</td>
　　　<td width="280">かかかか</td>
　　　<td width="128">きききき</td>
　　</tr>
　　<tr bgcolor="#FFFFFF">
　　　<td width="40" align="center">ああああ</td>
　　　<td width="110">いいいい</td>
　　　<td width="130">うううう</td>
　　　<td width="80" align="center">ええええ</td>
　　　<td width="130">おおおお</td>
　　　<td width="280">かかかか</td>
　　　<td width="128">きききき</td>
　　</tr>

本当に抽出しましたので表題部のcssが見にくいと思いますが、セルの下枠以外の指定です。
また、目視で設定しましたので表題部とずれてる所があるかもしれませんが・・。

ＫＯＸさん
亜が一番幅を取っていると思いませんでした。
ただこの場合ＯＳによってもＩＥのバージョンによっても
微妙に違ってきますよね（余裕を持った幅取りができない画面なんです・・）。

ＭＭＸさん
やはり基本はスタイルシートなんですね。。
ん〜・・。

ご意見ありがとうございます。


SUK2
ベテラン
会議室デビュー日: 2005/12/27
投稿数: 69
投稿日時: 2006-07-25 23:26
テーブルに
コード:
table-layout: fixed;
を指定すると、一行目に指定した幅で固定され、2行目以降の要素が大きくても、勝手に幅を変更されなかったと思います。

また、邪道な感じはしますが、すべてのtd要素内にwidthを固定したdiv要素を仕込み、
コード:
overflow: hidden;
を指定してもイケた気がします（記憶が定かでなくてすみません）。

ほかにも調べれば色々な方法があると思います。
スマートな方法があったら私にも教えて下さいw
かんぱち
ベテラン
会議室デビュー日: 2006/06/01
投稿数: 73
投稿日時: 2006-07-26 10:51
ＳＵＫ２さんありがとうございます。

table-layout: fixed; (幅指定)px
こちらの件ですが、リファレンスを読むと絶対指定になるようですね？？
これならば上下のテーブルの定義を全く同じにして、<td style=>でセットすれば
可能ですかね？？
一応やってみたのですが、問題なさそうですが等幅フォントで無いのでその時の
ずれが心配なのですが・・。

教えていただいた方法で行こうかと思ってます〜ありがとうございます。

色々探して、見たんですが難しいようですね。
http://blog.asura.co.jp/takehara/5219ac5dcee34422a506ab9f3df120df/entry.aspx
ここなんかはきれいに出来てますが、ぼくのマシンだとどうもうまく表示されませんでした。
また、ウインドウの座標でがちがちに指定しておられるので、ちょっと・・見送ってます。
ただ、あんなふうに出来たら良いなと思いました。

ん〜・・。ありがとうございます！
flakwing
会議室デビュー日: 2006/07/21
投稿数: 7
投稿日時: 2006-07-27 00:26
IE6でしか動作確認してないですし、それ以外のブラウザでは上手く動かないと思いますが、
1つのTABLEタグでヘッダ行だけ固定させることは出来ます。

コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.tableContainer {
	background-color: white;
	border: 1px solid black;
	height: 80px;
	overflow: auto;
	width: 656px
}
div.tableContainer table {
	width: 640px
}
thead.fixedHeader tr {
	position: relative;
	background-color: white;
}
thead.fixedHeader th, td {
	border-width: 1px;
	border-style: solid;
	border-color: threedhighlight threedshadow threedshadow threedhighlight;
}
</style>
</head>
<body>
<div class="tableContainer">
<table id="fileTable" border="0" cellspacing="0" width="100%">
<thead class="fixedHeader">
<tr><th width="60">らん１</th><th>らん２</th><th width="60">らん３</th><th width="60">らん４</th></tr>
</thead>
<tbody id="fileList" class="scrollContent">
<tr><td>あ</td><td>いいいい</td><td>うう</td><td>ええ</td></tr>
<tr><td>あ</td><td>いいいい</td><td>うう</td><td>ええ</td></tr>
<tr><td>あ</td><td>いいいい</td><td>うう</td><td>ええ</td></tr>
<tr><td>あ</td><td>いいいい</td><td>うう</td><td>ええ</td></tr>
<tr><td>あ</td><td>いいいい</td><td>うう</td><td>ええ</td></tr>
</tbody>
</table>
</div>
</body>
</html>

ポイントはXHTMLにすることだったはず・・・
かんぱち
ベテラン
会議室デビュー日: 2006/06/01
投稿数: 73
投稿日時: 2006-07-27 01:07
ありがとうございます。

おおっ！これはすごいですね！
このまま使えますね！

ただXHTMLとは？？javaサーブレットなのですが・・、こちらも勉強しないとダメですね。

あまりにもいい出来なので、このままスルーしたくないので、ＩＥ含めて勉強してきます！
ありがとうございます！
«前のページへ 1|2

スキルアップ／キャリアアップ（JOB@IT）