HTMLでタイムスケジュールを作成しています。

質問

HTMLでタイムスケジュールを作成しています。

ブラウザはIE7です。
左側の「No.」～「氏名」は固定です。
タイムスケジュールの部分に横スクロールを表示させ、ブラウザの横スクロールは使用しません。
1分単位で表示させたいのですが、どうしてもレイアウトが崩れてしまいます。
(添付の図ぐらいの間隔にしたいです。1分を1～3pxぐらいでしょうか。)
下記のHTMLは作成中のものですが、文字数制限のため一部を省略しています。
<table width="100%">
<td>
<table width="310" align="left" border="1" cellspacing="0">
<tr>
<td rowspan="2" width="10"><div align="center">No.</div></td>
<td width="100"><div align="center">所属</div></td>
<td width="100"><div align="center">部門</div></td>
<td width="100"><div align="center">勤務区分</div></td>
</tr>
<tr>
<td width="100"><div align="center">区分詳細</div></td>
<td width="100"><div align="center">階級</div></td>
<td width="100"><div align="center">氏名</div></td>
</tr>
<tr align="middle">
<td rowspan="2" height="50">1</td>
<td>所</td>
<td>部</td>
<td>区</td>
</tr>
<tr align="middle">
<td>詳</td>
<td>階</td>
<td>太郎</td>
</tr>
</table>
<div style="overflow-x:scroll; overflow-y:visible;">
<table height="100%" border="1" cellspacing="0">
<tr>
<td colspan="60" align="center">08</td>
<td colspan="60" align="center">09</td>
<td colspan="60" align="center">10</td>
</tr>
<tr>
<td colspan="15" align="right">15</td>
<td colspan="15" align="right">30</td>
<td colspan="15" align="right">45</td>
<td colspan="15" align="right">60</td>
<td colspan="15" align="right">15</td>
<td colspan="15" align="right">30</td>
<td colspan="15" align="right">45</td>
<td colspan="15" align="right">60</td>
<td colspan="15" align="right">15</td>
<td colspan="15" align="right">30</td>
<td colspan="15" align="right">45</td>
<td colspan="15" align="right">60</td>
</tr>
<tr align="center">
<td colspan="100" bgcolor="lightpink" height="50">未</td>
<td bgcolor="lightblue"></td>
<td bgcolor="gold"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="gold"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="gold"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="gold"></td>
<td bgcolor="lightblue"></td>
<td bgcolor="gold"></td>
<td colspan="70" bgcolor="lightgreen">仕</td>
</tr>
</table>
</div>
</td>
</table>

回答No.1

naokita · ベストアンサー

先日の回答者です。　なるほど、そんな風に作りましたか。。。

そもそも外枠の<tr>が無いですね。
それは置いといて、検証はしていませんが、
<td></td>が空要素だからかもしれませんし、
全<td>を計算しながら分刻みでwidthで設定すると綺麗になるかも。

tableの場合は、ブラウザによってセルがコンテンツに合わせて収縮するから幅を設定しないとお任せ状態になるって事です。

CSSで指定した方が早いですよ。

でも、分に数字？を入力するつもりなら、今後、また崩れるでしょうね。
（分に対しての時間の割合が合わなくなるから）
分の 1～3px 内に入力するのも困難ですよね？
分の部分をどんな風に表示したいのかわかりませんが、
分をセルで設定せずに、
セルを時間毎で区切り、
縦に分感覚で分けた縦線デザインの背景画像を設置したほうが良いかもしれません。

ローカルのみで使うなら、スペーサーなどを設定したり非表示対応でも良いでしょうが。

今回の場合は、
意図する通りに表示出来ないなどという事は無いでしょう。
（細かい表示関連はCSSで設定しましょう）

お礼

ご回答ありがとうございます。

CSSでwidthを設定し、スケジュールを固定することができました。
さすがに3pxとかは無理でしたので、スケジュールに表示する文字を考慮し30pxとりました。

ただ、colspanでセルを連結し、
align="center"で文字を中央にしようとしましたが、
なぜか連結した真ん中ではなく一番左端のセルの真ん中に表示されてしまいます。

widthを指定した状態でcolspanで連結してしまうと
このような現象になってしまうのでしょうか？

回答No.2

gogoshingo

<td colspan="100" bgcolor="lightpink" height="50">未</td> のように
colspanで連結した場合、widthをきっちり指定しないと表示が崩れます。
また、<td bgcolor="lightblue"></td> のように空セルがある場合、
<td bgcolor="lightblue">&nbsp;</td> とスペースを入れた方がよいです。

個人的には、スケジュール部分のセルはテーブルで区分けせず、
<div>で帯を作成した方が調整しやすい気がします。

<td><div class="lightpink" style="width:300px">未</div><div class="lightblue" style="width:3px"></div>～<div class="lightgreen" style="width:70px">仕</div></td>

お礼

ご回答ありがとうございます。

ご指摘のとおり空セルがあると微妙にズレてしまいましたが
&nbsp;で整えるとキレイに表示されました。

この帯で作成する方法を試してみたのですが、
classはcssで定義するのですよね？
指定するのは色や高さなどで良いのでしょうか？