- ベストアンサー
colspanで余計な余白
上段が複数ボックス、colspanで下段が単一ボックスの表を作り、上段ボックスには短い文字列やinputのボタンを入れています。 このcolspanを使った表の上段各ボックス内で、余計なスペースが発生します。 widthで上段ボックス幅を強制させようにも、上段ボックス内のボタンや文字列の後ろには余白があるにもかかわらず、余白を残したまま文字列だけが折り返されてしまいます。 が、colspanをやめて、上段下段を2つのtableに分けると、ボックス内の余計なスペースは消えました。 うまく説明できませんが…このcolspanの弊害？この現象の意味は何でしょう？
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
回答しても、その結果も言われない方なので無駄かもしれませんが、一応・・ 一生懸命読んでみたのですが、いまひとつわかりません。 どうも用語が正確でないことに起因するようです。 ボックスではなく，セル（コマ）ですね。表の整形については、 Tables in HTML documents (ja) ( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html ) の「視覚系ユーザエージェントによる表の整形」をよく読んでください。基本的に表の整形は逐次表示はデフォルトではありません。 全部のデータを読んで整形に取り掛かります。そのとき、colspanで列グループが指定してあると、その内容は均等割するブラウザが多いです。特にデータ量が多くなると、それが優先されます。 先の、INPUTのボタン周囲のスペース - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7116960.html )の結果も聞いていないので、対処の方法はわかりません。 ・なぜスタイルシートで、きちんと整形しないのですか？ ・書かれた内容から、tableを使うべきではないような気もします。 いったいどのような、フォームなのでしょう。
関連するQ&A
- 【IE6】テーブルにcolspanが入ると幅指定がずれる？
閲覧いただきありがとうございます。 <Html>にて、<table>を入れているのですが <colspan>すると幅指定がずれてしまいます。 タグ記述のミスなのか、仕様なのかはっきりと分からない為 質問させていただきます。 下記のようなテーブルを作っています。 【テーブル】 テーブル幅 500px 2行 5列：（各列100pxの5等分） 【列内容】 1行目 ├5列全て colspan 2行目 ├1列目：100px ├2-3列目：100+100＝200px (colspan=2) ├4-5列目：100+100＝200px (colspan=2) ここで、2-3列目に幅200pxに指定した <select>タグを入れると、意図しない幅になってしまいます。 意図している動きは 2-3列目の幅ぴったりに<select>が入ってほしいのですが 4-5列目の4列部分がえぐれてしまい、4-5列目が200pxではなく 100pxぐらいの描画になってしまいます。 そして<select>タグは2-3列目にぴったりと入らず、 後ろに100pxの空きがでてしまいます。 http://kikky.net/pc/css_bug020.html このサイトではIE6ではcolspanがあると幅指定がずれると なっていますが、同一の現象なのでしょうか？ 示唆いただければ幸いです。 宜しくお願いします。 --------------記述html--------------- <html> <head> <title> ColSpanテスト </title> </head> <body> <table width="500" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="border-collapse: collapse;" > <colgroup> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> </colgroup> <!-- １行目 --> <tr> <td colspan="5"> span5 </td> </tr> <!-- ２行目 --> <tr> <!-- １列目 --> <td> </td> <!-- ２-３列目 --> <td nowrap colspan="2" > <select style="width:200px;" size="1" name="sl" id="sl"> <option value="99999">２列にしたい</option> </select> </td> <!-- ４-５列目 --> <td colspan="2" > 200pxなのに・・・ </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- colspan を使用した際のIE7の動作
行き詰ってしまったのでこちらで質問させていただきます。 テーブルで表を作成しているのですが、 colspanで指定したセルの中にinputを入れると急にIE7でレイアウトが崩れます。 IEの他のverでは大丈夫なのですが、7だけくずれてしまうのは何か回避策があるのでしょうか？ ちなみに、下記のようなソースです。 全体で8列とり、１行目は項目３つに対してそれぞれinputを入れる列があり、 2行目は項目２つでinputを入れる列があります。 1行目は3等分にしたく、2行目は2等分にしたい形です。 何かほかに方法があるのでしょうか？ ご教授いただければと思います。 <style type="text/css"> .test{border-collapse:collapse;} .test td,.test th{border:solid 1px #000;} </style> <table width="952" border="1" cellspacing="0" cellpadding="0" class="test"> <tr> <th width="80">項目1</th> <td width="235"><input name="" type="text" value="12345" /></td> <th width="80">項目2</th> <td colspan="3"><input name="" type="text" value="12345" /></td> <th width="80">項目3</th> <td width="235"><input name="" type="text" value="12345" /></td> </tr> <tr> <th>項目4</th> <td colspan="3"><input name="input2" type="text" value="12345" /></td> <th width="80">項目5</th> <td colspan="3"><input name="input3" type="text" value="12345" /></td> </tr> </table>
- ベストアンサー
- HTML
- colspanを使うと正しく表示できない？！
ある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; } を指定したらなんとかうまく表示できました。 今回は春頃のバージョンのままで特に変更なく動かせるはずだったのですが。。。 そのままではダメなようです。 どのような方法があるのかアドバイスいただければと思います。 よろしくお願いします。
- ベストアンサー
- CSS
- CSSでボックス幅を文字列に合わせたい
ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。 テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。
- ベストアンサー
- HTML
- IE6 バグ table td colspan paddingの組み合わせ
Internet Explorer6ではテーブルにCOLSPANが指定されたセルが含まれるとcolspanを含まないセルの幅の指定がずれるというバグがあるようです。 特にこのバグは、テーブルの一段目の行の全てのセルがcolspanで結合され一つのセルになっている場合、顕著に現われるようです。 このバグは、テーブルに含まれる全てのセルにwidthを指定することである程度防げるようですが、全てのセルにwidthを指定しても、一段目のcolspanのあるセルの左右にcssでpaddingを指定しているとそのテーブルのcolspanを含まないセル（一段目以降のセル）の幅がずれてしまいます。 このバグをどのようにして回避するか、ご存知の方はおられますか？ よろしくお願いします。 キャサリン
- ベストアンサー
- HTML
- tableで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> よろしくお願いします。
- ベストアンサー
- HTML
- INPUTのボタン周囲のスペース
htmlページでINPUTのボタンを設置していますが、ボタン内部はWIDTHで余白を無くすことができますが、ボタンの両サイドに発生するスペースをなくす、または調整する方法はないでしょうか？ そのスペースが非常に邪魔で困っています。。
- ベストアンサー
- CSS
- エクセルの使い方 セルを直したい
説明が下手でわかりにくいと思いますがよろしくお願いします。 エクセルでスケジュール表を作っています。 ページ上段は日付がついた予定表 ページ下段は今月の重要項目 というような感じで作成したいと考えています。 ページ上段のセルには、日付・曜日・予定・出来事があります。予定と出来事は日付や曜日に比べセルの幅を広く設定。 と、ここまでは良いのですが、下段ではセルの幅が継続されており、うまくレイアウトできなく困っています。 下段のスペースのセルの幅を変更することはできるのでしょうか？
- ベストアンサー
- オフィス系ソフト
- ホームページのテーブルをWordに貼り付けると左にづれる？
以下のコードのHTMLで作られたテーブルをブラウザーに表示→コピー→Wordに貼り付けると、テーブルがWordの文字列開始位置よりも左側にづれてペーストされるのですが、どのようにして回避できるのでしょうか？ コード： <table width="550" border="1" cellspacing="0" cellpadding="40"> <tr> <td width="466" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="118"> 表見出し行 </td> <td width="266"> データ </td> </tr> </table> どうやら、テーブルのcellpaddingが関係しているようで、cellpaddingの値を以下のコードのように小さくすると、テーブルをWordに貼り付けたときに文字列開始位置よりも左にずれる割合は小さくなります。 コード： <table width="550" border="1" cellspacing="0" cellpadding="5"> <tr> <td width="536" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="188"> 表見出し行 </td> <td width="336"> データ </td> </tr> </table> ただ、それでも少し左にずれることには変わりませんし、cellpaddingの値が大きなテーブルをWordに貼り付けるときの回避策とはなりません。 どのようにしたら、cellpaddingの値が０ではないホームページのテーブルをブラウザーからコピーしWordに貼り付けたとき、Wordの文字列開始位置より左にずれないようにできるのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- テーブル内の左右にだけ余白を設定するには？
ＨＰビルダー6.3を使っています。 テーブルを使ってリンク集を作っていますが、 表のセルの左右に余白がなく文字が詰まって 読みづらいと思うので右クリックで表の属性の セル内余白を設定してみましたが、上下にも 余白ができて表示が乱れてしまいます。 セルの左右にだけ余白を作りたいのですが、 どういうhtmlを書き込めばいいですか？教えてください。
- 締切済み
- ホームページ作成ソフト
お礼
colspanのやっかいさがわかったのですが、連日作業中とあって余白の件のお礼が遅くなりました。 ここ5年ほどテーブルでレイアウトで更新を続けており、ここ1年はスタイルシートに徐々に変更していますが、css段組への移行は一番後回しになっています。 何せ1万ページ以上あるので、段組の雛型ができれば、エクセルとVBAで一括変換してファイルを一気に生成するつもりでいますが、雛型がまだできてません。 テーブルではそろそろ限界がきたかも知れません。 勉強します。 ありがとうございました。