1272328680 「HTMLのcolspanで、セルの幅が意図したとおりに一定の幅をとってくれない」という質問です。


以下のHTMLだと、意図どおりにどのセルもだいたい同じ幅で表示されるのに(上図)、
先頭の1行(xのセル)を削除すると、とたんにBのセル幅が縮まる(下図)のを回避する方法を教えていただけないでしょうか。
<td>タグで1つ1つに広さを指定する方法以外でお願いいたします。

※なお回答者が過去の質問の様子からポイントゲッター的であると判断した場合、回答をオープンしません。あしからずご了承ください。

<html>
<head></head>

<body>

<table border=1 width=50%>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td rowspan=3>A</td>
<td colspan=2>B</td>
<td>C</td>
<td rowspan=2>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan=2 colspan=2>F</td>
</tr>
<tr>
<td>G</td>
<td rowspan=2>H</td>
</tr>
<tr>
<td colspan=4>I</td>
</tr>

</table>

</body>
</html>

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2010/04/27 09:38:01
  • 終了:2010/04/27 11:49:40

ベストアンサー

id:memamii No.2

mamekko回答回数11ベストアンサー獲得回数12010/04/27 11:02:09

ポイント50pt

確かに、そうなることは確認しました。

最初の状態では、1行目にあきらかに5列(~が5セット)あるので、2行目以降のcolspanがうまくきいています。しかし、1行目を削除すると、新しい1行目はA,B,C,Dの4つの列しかなくなります。Bでcolspanをしていしていても、あくまでテーブルの列の数は1行目の列の数できまりますので、無視されてしまっています。

どうしても、最初の状態と同じようにしたいのであれば、

<td colspan=2>B</td>

のところを、

<td style="border-right-width:0px">B</td>
<td style="border-left-width:0px">&nbsp;</td>

のようにすれば、見た目上はなんとかなりそうです。

id:lionfan

memamii様、親切なご回答、ありがとうございます。

たいへん助かりました。いるかをどうぞ。

2010/04/27 11:49:18

その他の回答(1件)

id:koriki-kozou No.1

koriki-kozou回答回数480ベストアンサー獲得回数792010/04/27 10:27:24

ポイント20pt

ブラウザはセルの幅や高さを必要分だけ用意するため当然の結果


><td>タグで1つ1つに広さを指定する方法

確かに面倒


>以外

スタイルシートで最低幅を指定しておくと楽


min-width-スタイルシートリファレンス

http://www.htmq.com/style/min-width.shtml

id:lionfan

koriki-kozou様、ありがとうございます。了解です。

2010/04/27 11:48:39
id:memamii No.2

mamekko回答回数11ベストアンサー獲得回数12010/04/27 11:02:09ここでベストアンサー

ポイント50pt

確かに、そうなることは確認しました。

最初の状態では、1行目にあきらかに5列(~が5セット)あるので、2行目以降のcolspanがうまくきいています。しかし、1行目を削除すると、新しい1行目はA,B,C,Dの4つの列しかなくなります。Bでcolspanをしていしていても、あくまでテーブルの列の数は1行目の列の数できまりますので、無視されてしまっています。

どうしても、最初の状態と同じようにしたいのであれば、

<td colspan=2>B</td>

のところを、

<td style="border-right-width:0px">B</td>
<td style="border-left-width:0px">&nbsp;</td>

のようにすれば、見た目上はなんとかなりそうです。

id:lionfan

memamii様、親切なご回答、ありがとうございます。

たいへん助かりました。いるかをどうぞ。

2010/04/27 11:49:18
  • id:taknt
    http://okwave.jp/qa/q33122.html
    これで できるのかな?
    わからんけど。
  • id:lionfan
    taknt様、皆さま、ありがとうございます。
    たいへん助かりました。まだまだhtmlには知らないことだらけです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません