![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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>
![「HTMLでタイムスケジュールを作成してい」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/e/804156_5497d13525284/M.jpg)
No.1ベストアンサー
- 回答日時:
先日の回答者です。
なるほど、そんな風に作りましたか。。。そもそも外枠の<tr>が無いですね。
それは置いといて、検証はしていませんが、
<td></td>が空要素だからかもしれませんし、
全<td>を計算しながら分刻みでwidthで設定すると綺麗になるかも。
tableの場合は、ブラウザによってセルがコンテンツに合わせて収縮するから幅を設定しないとお任せ状態になるって事です。
CSSで指定した方が早いですよ。
でも、分に数字?を入力するつもりなら、今後、また崩れるでしょうね。
(分に対しての時間の割合が合わなくなるから)
分の 1~3px 内に入力するのも困難ですよね?
分の部分をどんな風に表示したいのかわかりませんが、
分をセルで設定せずに、
セルを時間毎で区切り、
縦に分感覚で分けた縦線デザインの背景画像を設置したほうが良いかもしれません。
ローカルのみで使うなら、スペーサーなどを設定したり非表示対応でも良いでしょうが。
今回の場合は、
意図する通りに表示出来ないなどという事は無いでしょう。
(細かい表示関連はCSSで設定しましょう)
ご回答ありがとうございます。
CSSでwidthを設定し、スケジュールを固定することができました。
さすがに3pxとかは無理でしたので、スケジュールに表示する文字を考慮し30pxとりました。
ただ、colspanでセルを連結し、
align="center"で文字を中央にしようとしましたが、
なぜか連結した真ん中ではなく一番左端のセルの真ん中に表示されてしまいます。
widthを指定した状態でcolspanで連結してしまうと
このような現象になってしまうのでしょうか?
No.2
- 回答日時:
<td colspan="100" bgcolor="lightpink" height="50">未</td> のように
colspanで連結した場合、widthをきっちり指定しないと表示が崩れます。
また、<td bgcolor="lightblue"></td> のように空セルがある場合、
<td bgcolor="lightblue"></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>
ご回答ありがとうございます。
ご指摘のとおり空セルがあると微妙にズレてしまいましたが
で整えるとキレイに表示されました。
この帯で作成する方法を試してみたのですが、
classはcssで定義するのですよね?
指定するのは色や高さなどで良いのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- 工学 【制御工学】単位ステップ応答の遅れ時間の求め方(令和2年度の機械設計技術者試験(制御工学)の問題) 3 2022/11/02 10:51
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
テーブルの行の高さを指定する...
-
ホームページ 表の上の余白を...
-
表組の均等割り付け
-
文字列が入っているtdを削除せ...
-
テーブルの行を折りたたみたい...
-
Dream Weaver CC で属性一括削除
-
テーブルの任意の列を非表示に...
-
テーブル内でdivを使った時に改...
-
テーブルタグのセルの幅の一部...
-
nowrapを指定しても改行される...
-
HTML <td></td>タグ セル内余...
-
HTMLのテーブルで桁をそろ...
-
HTMLでタイムスケジュールを作...
-
tableでcolspanを使うと次行以...
-
セルをまたがるリンク。
-
CSSだけで<table>の<td>や<tr>...
-
HTMLでアンケートの作り方を教...
-
TRタグの余白をcssで設定するには
-
チェックボックスが複数チェッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルの表示がずれます
-
HTML <td></td>タグ セル内余...
-
HTMLのテーブルで桁をそろ...
-
中に<table></table>が使えるア...
-
スタイルシートで colspan=3と...
-
htmlのtable内に画像
-
ホームページ 表の上の余白を...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
CSSだけで<table>の<td>や<tr>...
-
EXCELからhtmlへの変換で罫線が...
おすすめ情報