親子におすすめの新型プラネタリウムとは?

あるwebシステムで
現在の予約数を表示するようなhtmlを作成しています。

tableを使って、td内に予約できる数をcolspanで指定して、
現在の予約状況がひとめでわかるように表示しているのですが
なぜか、正しく表示できなくなってしまいました。
ブラウザもie6からie8にはなったのですが。

いろいろ検索してみると、似たような質問はたくさんされていましたし、
それぞれにwidth指定もすればよい・・・のように記載されていて解決されているようでした。
でも、同じように試してみましたがダメでした。(表示結果は同じ)


サンプルとしまして、(全体で92がMAXの予約数として です)

<table width="319" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="25" colspan="2" align="center">日時</td>
<td width="100" colspan="50" align=right>50</td>
<td width="84" colspan="42" align=right>92</td>
<td width="35" height="25" align="center" bgcolor="#ffd37d">空き</td>
</tr>

<tr>
<td rowspan="12" width="55" align=center valign=top>11月26日</td>
<td width="45" align=center>0時</td>
<td width="110" colspan="55" bgcolor="#ff4500" align="center">55</td>
<td width="74" colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>1時</td>
<td colspan="55" bgcolor="#ff4500"align="center">55</td>
<td colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>2時</td>
<td colspan="55" bgcolor="#ff4500" align="center">55</td>
<td colspan="37" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>37</font></td>
</tr>

<tr>
<td width="45" align=center>3時</td>
<td colspan="70" bgcolor="#ff4500" align="center">70</td>
<td colspan="22" bgcolor=white><br></td>
<td width="35" align=center><font color=navy>22</font></td>
</tr>

 ・
 ・
 ・

のような場合、<tr>内の2つめの<td>のcolspan=70も55も同じ幅で表示されます。
違う・・・といえば、align=centerでそれぞれ数字を表示させていますが
55のテキストが少し左寄り、70がcenterに表示されてるように見えます。
また、赤背景色の幅も微妙に0.xミリくらいは colspan=70の方が広いです。

tableのwidthがborderの幅を考慮していないのですが
これも問題でしょうか?

みなさん、似たような問題がでても解決されているようなのですが
自分の場合、どうやってもなかなか解決できません。

tableの幅を広めに取ったり、style指定したり、widthを入れたり・・・

因みに依然(今年の春頃まで?)は、width無しのcolspan指定だけで、
思い通りに表示できていました。
その後、ブラウザのバージョンアップがありました。

最初(春頃)はstyleで
table{
table-layout:fixed;
}
を指定したらなんとかうまく表示できました。
今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。
そのままではダメなようです。

どのような方法があるのかアドバイスいただければと思います。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

colgroup とか col とかを使ってみる?

    • good
    • 0
この回答へのお礼

Tacosan様

colgroup・・・使ったことがありませんでした。

調べて、htmlを編集して表示させてみたところ、
最初に
<colgroup span="2" width="100">
<colgroup span="92" width="92">
<colgroup span="1" width="35">
を入れただけで、ちゃんと表示できました!
散々、悩んだのでちょっと感激です(^^)

ホントにこれだけでいいのか、まだ不安もあるのですが
修正量も少ないし、この方法にしてみます。

有難うございました!

お礼日時:2012/11/28 11:11

No.4です。

後方互換を考えると
<dl id="orderedList">
<dt>日時</dt>
<dd>時間<span class="ordered w46">予約済み</span><span class="noorder w46">空時間</span></dd>
<dt>11月26日</dt>
<dd>0時:<span class="ordered w55">55</span><span class="noorder w37">37</span></dd>
<dd>1時:<span class="ordered w60">60</span><span class="noorder w32">32</span></dd>
<dd>2時:<span class="ordered w55">55</span><span class="noorder w37">37</span></dd>
<dd>3時:<span class="ordered w70">70</span><span class="noorder w22">22</span></dd>
<dt>11月27日</dt>
<dd>0時:<span class="ordered w60">60</span><span class="noorder w32">32</span></dd>
<dd>1時:<span class="ordered w40">40</span><span class="noorder w52">52</span></dd>
<dd>2時:<span class="ordered w20">20</span><span class="noorder w72">72</span></dd>
<dd>3時:<span class="ordered w0">0</span><span class="noorder w92">92</span></dd>
</dl>

[CSS]
#orderedList{border:solid 1px gray;width:60%;margin:0 auto;font-family:"MSゴシック",monospace;}
#orderedList dt{width:6em;float:left;border-top:gray 1px solid}
#orderedList dd{margin-left:6em;border:solid 1px silver;padding:0 1em 0 0.5em;}
#orderedList dd span{display:inline-block;position:relative;text-align:center;}
#orderedList dd span.ordered{background:lime linear-gradient(lime,white,lime);}
#orderedList dd span.noorder{background:silver linear-gradient(silver,white,silver);}
#orderedList dd span.w0{width:0%;}
#orderedList dd span.w1{width:1%;}
#orderedList dd span.w2{width:2%;}
・・・【中略】・・・
#orderedList dd span.w89{width:89%;}
#orderedList dd span.w90{width:90%;}
#orderedList dd span.w91{width:91%;}
#orderedList dd span.w92{width:92%;}
    • good
    • 0
この回答へのお礼

ORUKA1951様

htmlを編集して試してみました。
が、まだ思ったように実現できていません。

時間がかかるようだと他の方法にするかもしれません。
でも、勉強になりました。
ありがとうございました。

お礼日時:2012/11/28 10:51

この場合、必ず空のセルを入れておかないとダメです。


<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td>
</tr>
ただ、tableを使用するバーは、以前は良く行われていましたが、この場合はスタイルシートを使ったほうが楽でしょう。
<table summary="orderList">
_<tbody>
__<tr>
___<th abbr="date">日時</th><th abbr="ordered">予約状況</td><th abbr="空">空</th>
__</tr>
__<tr>
___<th abbr="11月26日" rowspan="3">11月26日</th><td><span class="O-55">55</span></td><td>37</td>
__</tr>
__<tr>
___<td><span class="O-60">60</span></td><td>32</td>
__</tr>
__<tr>
___<td><span class="O-55">55</span></td><td>37</td>
__</tr>
_</tbody>
</table>
★table,thにはそれぞれsummary,abbrが必須なのでそれを利用してスタイルシートが書いてあります。

に対して、
table[summary="orderList"] th[abbr="ordered"]{width:184px;}
table[summary="orderList"] td span{display:inline-block;background-color:red;text-align:right;}
table[summary="orderList"] td span.O-1{width:2px;}
table[summary="orderList"] td span.O-2{width:4px;}
table[summary="orderList"] td span.O-3{width:6px;}
・・・【中略】・・・
table[summary="orderList"] td span.O-58{width:116px;}
table[summary="orderList"] td span.O-59{width:117px;}
table[summary="orderList"] td span.O-60{width:118px;}



なお、HTML5対応のブラウザに限定するなら、<meter>要素を使用するのが楽です。
<dl id="orderdList">
<dt>11月26日</dt>
<dd>0時:<meter value=55 max=92>92中55済み</meter>37</dd>
<dd>1時:<meter value=60 max=92>92中60済み</meter>32</dd>
<dd>2時:<meter value=55 max=92>92中55済み</meter>37</dd>
<dd>3時:<meter value=70 max=92>92中70済み</meter>22</dd>
<dt>11月27日</dt>
<dd>0時:<meter value=60 max=92>92中60済み</meter>32</dd>
<dd>1時:<meter value=40 max=92>92中40済み</meter>52</dd>
<dd>2時:<meter value=20 max=92>92中20済み</meter>72</dd>
<dd>3時:<meter value=80 max=92>92中80済み</meter>12</dd>
</dl>
上記に対するCSS
#orderList dl dt{float:left;}
#orderList dl dd{margin-left:5em;}
    • good
    • 0
この回答へのお礼

引き続き、ORUKA1951様

最初に空の<td>を個数分書いてみましたところ、うまく表示できました。
まだその部分を消すことはできていません。
tableの先頭にちょっと隙間が表示されますが、最悪、このままでもいけそうです。

スタイルシートはまだイマイチ苦手なので、うまく活用できません。。。
html5対応のブラウザ限定にはできない仕様になっています。

時間も限られていますので、他の方法でダメだった場合
これでいこうかと思っています。

ありがとうございました。

お礼日時:2012/11/28 10:56

 要するにプログレスバーのようなことをなさりたいかと存じますので、table ではなくて、イメージ等の幅を設定する方法をご紹介いたします。



 先ずは、
●CSSとhtmlと画像1枚で簡単なプログレスバーを作る
http://pulltab.info/2010/04/csshtml.html
に掲載されたデモページ
http://pulltab.info/2010/04/16/
をご覧ください。

 上記のページでは、青色の所と灰色の所に、それぞれ幅1ピクセルの画像を配置し、イメージの widht属性 を設定することで、プログレスバーの幅を設定しています。

 同様に、イメージではなくて水平線(hr)の幅を設定することで、下記のようなこともできます(まぁ、あまりお勧めでもありませんが...)。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
  hr.prog {position: absolute; z-index: -1; align: left; color: red; height: 20;};
</style>
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" align="center">日時</td>
    <td><hr class="prog" width="50">50&emsp;&emsp;&emsp;&emsp;92</td>
    <td width="35" size="50" align="center" bgcolor="#ffd37d">空き</td>
  </tr>
  <tr>
    <td rowspan="12" width="65" align=center valign=top>11月26日</td>
    <td align=center width="45">0時</td>
    <td><hr class="prog" width="60">60</td>
    <td align="right"><font color=navy>32</font></td>
  </tr>
  <tr>
    <td align=center>1時</td>
    <td><hr class="prog" width="70">70</td>
    <td align="right"><font color=navy>22</font></td>
  </tr>
  <tr>
    <td align=center>2時</td>
    <td><hr class="prog" width="80">80</td>
    <td align="right"><font color=navy>12</font></td>
  </tr>
  <tr>
    <td align=center>3時</td>
    <td><hr class="prog" width="90">90</td>
    <td align="right"><font color=navy> 2</font></td>
  </tr>
    • good
    • 0
この回答へのお礼

DOUGLAS_様

一番最初(スクラッチ時)、画像を使って・・・と、考えたこともあります。
でも、簡単な(?)方法をまわりの人たちから教えられ、今に至っています。
時間があればやってみたいのですが、
とりあえず今、すぐに動く(表示できる)モノを作らなければならないので
他の方法をまず試してみます。

ありがとうございました!

お礼日時:2012/11/28 11:00

こんにちは!



多分ですが、事前に95個(?)tdを用意してあげれば
思った通りの表示になると思います。
これはあまりにもテキトーですが…(汗)

<table width="319" border="1" cellpadding="0" cellspacing="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td width="100" height="25" colspan="2" align="center">日時</td>
<td width="100" colspan="50" align=right>50</td>
<td width="84" colspan="42" align=right>92</td>
<td width="35" height="25" align="center" bgcolor="#ffd37d">空き</td>
</tr>

・・・・・・・

要するに、colspanは事前に用意されているテーブルのtd以上は
結合できないってことです。
逆に言えば、IE6で表示できていたのはブラウザのバグです。
試しに上のtd祭りを入れてあげると思った表示がされると思いますよ♪
あとはCSSなりで見えないように隠せばOKかと…で、いいのかな(^^;
1つの方法として「こんなのもある」程度に思って下さい。
    • good
    • 0
この回答へのお礼

bvltiggeari様

IE6のバグだなんて、、、ほんと悲しくて困ったものです。
そういう作りをしてしまった自分のせいですが。(^^;

他にもIE8になったらうまく表示できない箇所がたくさんあり、(; _ ;)状態です。

空の<td>を数分いれたら、うまく表示できました。

他の方法でダメだったら、これでいこうかと思っています。

有難うございました!

お礼日時:2012/11/28 11:05

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qtableでcolspanを使うと次行以下のセルの幅が均等に?

tableでcolspanを使うと、colspanで結合した行の次行以下のセルの幅が均等になってしまいます。

どうすれば、colspanで結合した行の次行以下のセルの幅が均等になるのを防げるでしょうか?IE6,IE7

意図的にスタイルシートは、使用しないでください。
例:
<table width="300" border="1" cellspacing="1" cellpadding="5">
<tr>
<td colspan="2" width="284" align="center">
タイトルセル
</td>
</tr>
<tr align="left" valign="top">
<td width="100">
セル左
<td>
<td width="171">
セル右
<td>
</tr>
<table>

上記の場合、本来ならば、左のセルの幅(100px)が右のセルの幅(171px)より狭いはずなのに、左のセルの幅と右のセルの幅が均等になっていしまいます。
下記コード部分を上記のコードから削除すると、本来の比率で左のセルと右のセルの幅が表示されます。
<tr>
<td colspan="2" width="284" align="center">
タイトルセル
</td>
</tr>

よろしくお願いします。

tableでcolspanを使うと、colspanで結合した行の次行以下のセルの幅が均等になってしまいます。

どうすれば、colspanで結合した行の次行以下のセルの幅が均等になるのを防げるでしょうか?IE6,IE7

意図的にスタイルシートは、使用しないでください。
例:
<table width="300" border="1" cellspacing="1" cellpadding="5">
<tr>
<td colspan="2" width="284" align="center">
タイトルセル
</td>
</tr>
<tr align="left" valign="top">
<td width="100">
セル左
<td>
<td width="171">
セル右
...続きを読む

Aベストアンサー

こんにちは

>実際に試していただいたのでしょうか?
はい。他の方はどうか分かりませんが僕はソース関係は簡単すぎるものや時間がなくて試せない場合を除いて全て試した上で回答させてもらっています
試していない場合には『動作未確認です』というコメントをつけています

><td>合計と<table>widthが少し違うので多少の微調整はあります
これは
<table border="1">
<td colspan="2" align="center">
としたものと比べていたので実際に計算してみたらあっています(--;)
この点はこちらの勘違いでしたのでお詫びしますm(--)m

均等になっていないという実証は
・td幅を(100,171)から(50,221)などに変えたり
・td幅を逆にしたもの(171,100)のものと並べてみたらよく分かると思います

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

Qスタイルシートで colspan=3と定義することは可能でしょうか?

<style>
x {

}
</style>

<table>
<tr>
<td colspan=3 class="x">タイトル</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>

また、有名なブラウザで対応している最新のCSSバージョンは何でしょうか?

よろしくお願いいたします。

Aベストアンサー

できないと思います。

colspan は、セルを連結する指定ですが、
もともと
<td></td><td></td><td></td>
であったものが
<td colspan=3></td>
のように連結するには、他の"<td></td><td></td>"を削除する必要があります。
それは、スタイルだけの話ではなくてセルの実体を操作する必要があるということですから。

Qテーブルで列の幅を指定する

HTMLタグでWEBサイトを作成していますが、テーブルの幅を指定しても実際ページを開けると、同じ数値入れても同じ幅にならなかったり、全ての幅指定してもその通りになりません。またウィンドウを大きくしたり小さくしたりすると、特定の列のみ幅が狭くなったり広くなったりします。どうすれば幅を指定した数値どおりに固定できますでしょうか。

Aベストアンサー

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかかかか</td>
<td width="80">ききききききききききききききききききききききききき</td>
<td>くくくくくくくくくくくくくくくくくくくくくくくくくくくくくく</td>
<td>けけけけけけけけけけ</td>
</tr>
</table>
</body>
</html>

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかか...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qie8のcssでcol要素のwidthがきかない

ie7でうまく表示しているソースで、先日ie8にアップグレードし表示を確認しましたら、セルの幅の設定がうまくいかず、すべてのセルの幅が同じ長さ(省略値?)になっていました。
いろいろと確認して行くと、どうもcol要素のcssのwidthが無視されているようでした。
cssはまだ勉強し始めたばかりで詳しくありません。cell11,cell12の中にwidthを指定すればwidthは有効のようです。
どなたか、どこを修正すれば直るか教えてください。ソースは以下の通りです。
-------------------------------------------
htmlのソース
<table class="table2">
<col class="col41">
<col class="col42">
<col class="col51">
<col class="col52">
<col class="col41">
<col class="col42">
<col class="col51">
<col class="col52">
<tr>
<th class="cell12" colspan="2" align="center" nowrap>3月</th>
<th class="cell12" colspan="2" align="center" nowrap>4月</th>
<th class="cell12" colspan="2" align="center" nowrap>5月</th>
<th class="cell12" colspan="2" align="center" nowrap>6月</th>
</tr>
<tr>
<th class="cell11" nowrap>点数</th>
<th class="cell11" nowrap>金額</th>
<th class="cell11" nowrap>点数</th>
<th class="cell11" nowrap>金額</th>
<th class="cell11" nowrap>点数</th>
<th class="cell11" nowrap>金額</th>
<th class="cell11" nowrap>点数</th>
<th class="cell11" nowrap>金額</th>
</tr>
<tr>
<td class="cell12" nowrap>100</td>
<td class="cell12" nowrap>200,000</td>
<td class="cell12" nowrap>50</td>
<td class="cell12" nowrap>100,000</td>
<td class="cell12" nowrap></td>
<td class="cell12" nowrap></td>
<td class="cell12" nowrap></td>
<td class="cell12" nowrap></td>
</tr>
</table>
-----------------------------------------
cssのソース
.table2 {
border : 0px solid black ;
border-collapse: collapse ;
margin: 0px;
padding: 0px;
}

.col41 { /* 緑 各月 点数 */
text-align: right;
width: 50px;
background-color: #e0ffff ;
}

.col42 { /* 緑 各月 金額 */
text-align: right;
width: 80px;
background-color: #e0ffff ;
}

.col51 { /* 白 各月 点数 */
text-align: right;
width: 50px;
background-color: #ffffff ;
}

.col52 { /* 白 各月 金額 */
text-align: right;
width: 80px;
background-color: #ffffff ;
}


.cell11 {
border-right : 1px solid silver ;
border-bottom: 1px solid black ;
}

.cell12 {
border-right : 1px solid silver ;
border-bottom: 1px solid silver ;
}

よろしくお願いします。

ie7でうまく表示しているソースで、先日ie8にアップグレードし表示を確認しましたら、セルの幅の設定がうまくいかず、すべてのセルの幅が同じ長さ(省略値?)になっていました。
いろいろと確認して行くと、どうもcol要素のcssのwidthが無視されているようでした。
cssはまだ勉強し始めたばかりで詳しくありません。cell11,cell12の中にwidthを指定すればwidthは有効のようです。
どなたか、どこを修正すれば直るか教えてください。ソースは以下の通りです。
-------------------------------------------
html...続きを読む

Aベストアンサー

私の環境で色々と試してみたところ問題を理解できました。
(最初、早とちりして変な回答をしてしまうところでした(汗)

今回の問題の原因は以下にあります。

1、IE7からIE8にかけて変化した部分
2、col要素(colgroup要素)へのwidthスタイル指定の意味

まずは後者から解説します。
本来、col要素へのwidthスタイル指定の意味は、
『列の最小幅の指定』であります。
『列の厳密な幅の指定』ではありません。(情報元:Web標準の教科書)
すなわち、
・セルの内容物がwidthで指定した幅を超えている
・テーブル全体の幅がブラウザ表示域に比べて小さい(つまりテーブルが横に広がるだけのスペースが残っている)
この2つの条件が同時に満たされた時、列の幅はcol要素のwidthで指定した幅よりも大きくなります。

ただし、これはcssの仕様書に沿ってきちんと作られたWebブラウザでの場合です。
IEではcssの仕様を守っていない箇所がいくつもあります。cssを勉強し始めたばかりだと言えど、もしかしたらご存知ではないでしょうか。

ここで前者の問題点が関係してきます。
IE7ではcol要素にwidthを指定した場合、きちんと厳密に列がその幅になりました(私の環境でも確認しました)。
しかし、IE8では内容物に対し柔軟に幅が変わるようになっています(つまり上に挙げたcssの仕様に即した挙動をしています)。
すなわち、IE7からIE8にかけて、どちらかと言えばcssの仕様に従うようにソフトウェアが改善されたということになります。

以上を踏まえて問題の核心である『全ての列が同じ幅になる』点を考察しますと、
恐らく、

・質問内容に載っていない部分のcssにより、セル内の文字の横幅が80px以上になっていて、IE8では全ての列の幅が最小幅(50px,80px)に収まらず、80px以上になっている

のではないかと思われます。

修正手段としては、やはり一つ一つのセルにクラス指定をするほかないかと考えます。
table要素のスタイル指定に関しましては、今回の問題のようににっちもさっちもいかない場合があり、大変に難しいです。
特に幅を綺麗に指定したいのに面倒くさい方法しかないというのは、cssの問題の一つだと考えます。
このあたりの問題はHTML5で解決されていると良いのですが……

また、col要素について記述されたサイトを参考サイトとして挙げておきます。サイトで言われているとおり、col要素は子要素を持たないゆえの制限が幾つかあります。

参考URL:http://blog.btmup.com/xhtml/col-colgroup-css.html

私の環境で色々と試してみたところ問題を理解できました。
(最初、早とちりして変な回答をしてしまうところでした(汗)

今回の問題の原因は以下にあります。

1、IE7からIE8にかけて変化した部分
2、col要素(colgroup要素)へのwidthスタイル指定の意味

まずは後者から解説します。
本来、col要素へのwidthスタイル指定の意味は、
『列の最小幅の指定』であります。
『列の厳密な幅の指定』ではありません。(情報元:Web標準の教科書)
すなわち、
・セルの内容物がwidthで指定した幅を超え...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブルのヘッダとボディの幅がズレルのを防ぐ

ヘッダとボディの幅を可変にし、かつズレないようにするにはどうすればよいのでしょうか?

Aベストアンサー

>ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

 floatの用途を間違えています。
 floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTMLやスタイルシートの目的とかけ離れています。使うならabsoluteでしょう。

 しかし、floatやabsolute、fixedは、他の要素から完全に切り離されますから、列のセル幅を引き継げません。tableの描画ルーチンに従わなくなります。

 もう一点、tableの扱いはブラウザごとに大きな差があります。また根本的な問題として、tableには他のブロック要素に使えるプロパティが使えません。height/overflowなど・・

 そのような表を作成される場合は、table,thead,tfoot,tr,tdの各要素をblock要素に置き換えて、幅をセルごとにきちんと指定して配置するのが無難です。

_<table class="scroll" summary="scrollTbody">
__<thead>
___<tr>
____<th>あ行</th><th>か行</th><th>さ行</th><th>た行</th>
___</tr>
__</thead>
__<tbody>
___<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>
___<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>
___<tr>
____<td>お</td><td>こ</td><td>そ</td><td>と</td>
___</tr>
__</tbody>
_</table>
に対して
table.scroll,table.scroll *{display:block;margin: 0;padding:0;line-height:30px;}
table.scroll{width:428px;margin-top:50px;border-bottom:1px solid gray;}
table.scroll thead,table.scroll tbody{width:100%;border:none;}
table.scroll tbody{height:94px;overflow:auto;width:428px;}
table.scroll thead th,table.scroll tbody td{float:left;width:100px;border:solid gray 1px;}
/* 本来はfloatではなくdisplay:inline-blockとすべきだが後方互換のためやむなくfloat */
table.scroll tbody,table.scroll tbody tr{clear:left;}

>ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

 floatの用途を間違えています。
 floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTML...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング