今だけ人気マンガ100円レンタル特集♪

質問させて頂きます。

現在、テーブルを使用して表を作っているのですが、
ブラウザによってセルの高さが変わってしまいます。

safariでは思った通りのレイアウトになるのですが、
chrome、Firefoxでは [ height ] の値が反映されていないのか、
崩れてしまいます。

添付は希望するレイアウト(safariではこのように表示されます)です。


ソースを記載しますので、どなたかご教示お願い致します。

--- html ---

<table class="hogs" cellspacing="5">
<tr>
<td width="180" height="184" rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td>
<th height="22">項目1</th>
<td>文章1</td>
</tr>
<tr>
<th height="22">項目2</th><td height="22">文章2</td>
</tr>
<tr>
<th height="140" valign="top">項目3</th><td valign="top">文章3</td>
</tr>
</table>


--- CSS ---

table.hoge {
background-color: rgba(50,50,50,0.3);
width: 640px;
height: 184px;
margin: 0 auto 18px;
padding: 10px;
}

table.hoge th {
height: 22px;
background-color: #7ac0c9;
width: 80px;
}

table.hoge td {
padding: 0 20px;
}

「ブラウザによってテーブルのセルの高さが変」の質問画像

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

A 回答 (3件)

スタイルシートでの指定・・


table.hoge th {height: 22px;
この場合は詳細度が[0,0,1,2]ですね。一方ブラウザの属性での指定(height="140")の詳細度は0です。
当然、属性での指定は上書きされます。
・・・・height="140" 自体は正しいです。単位をつけてはなりません。
 ⇒height = length [CN] ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 ⇒6.4.3 セレクタの詳細度を計算する ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
 ⇒6.4.4 非CSSの見栄えヒントの優先順位 ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

 なお、
<table summary="目次" border="1">
  <tbody><!-- ひとつしかないときはなくてよい -->
   <tr>
    <td rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td>
    <th abbr="項目1">項目1</th>
    <td>文章1</td>
   </tr>
   <tr>
    <th>項目2</th><td>文章2</td>
   </tr>
   <tr>
    <th>項目3</th>
    <td>文章3</td>
   </tr>
  </tr>
 </tbody>
</table>
[スタイルシート]
table[summary="目次"]{
 border-collapse:separate;
 background-color: rgba(50,50,50,0.3);
 width: 640px;
 height: 184px;
 margin: 0 auto 18px;
 padding: 10px;
 border-spacing:5px 10px;
}
table[summary="目次"] th{
 height: 22px;
 background-color: #7ac0c9;
 width: 80px;
}
table[summary="目次"] td {
padding: 0 20px;
}

カスケーディングや詳細度は、カスケーディングスタイルシートの命ともいえるものです。プロパティより先に確実に身につけないとなりません。
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

なお、こちらのほうが良いと思う。
<dl>
 <dt>項目1</dt>
 <dd>文章1</dd>
 <dt>項目2</dt>
 <dd>文章2</dd>
 <dt>項目3</dt>
 <dd>文章3</dd>
</dl>
    • good
    • 0
この回答へのお礼

まだまだ初心者なもので、
カスケーディングや詳細度という言葉は初めて知りました。
もっと勉強しようと思います。

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

お礼日時:2014/04/09 13:23

3つのthに同じ高さを指定しているのですから同じ高さになって不思議はありません。



table.hoge th {
height: 22px;
}

3つ目だけ高さを変えたいのなら、3つ目だけ別の指定にすればよいでしょう。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
ここだったんですね、やってみます!

お礼日時:2014/04/09 13:22

あらゆるHTMLにおいて、ピクセルで数値を指定したい場合は


"1000" ではなく、1000px と書く方が確実ですよ。(引用符は不要)

この場合、CSSでは正しく書いていますが、HTMLの方の"184"が優先されているのでしょう。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
px表記にしても、HTMLの方の記述を消してみてもダメでした。。

3つの<tr>が全部同じ高さになっています。。。

お礼日時:2014/03/28 17:20

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

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

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

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

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

Qの高さ固定。情報増加時、高さ自動変化

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>

<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table...続きを読む

Aベストアンサー

こんばんは。

TABLEのheight:150px;をやめる。
TDにstyle="min-height:150px;"

QIEとクロームの表示ずれ

普段IEを使ってHPを表示しているのですが、クロームで
表示してみたところ、添付資料のように表示されました。
(レイアウトに関する部分はCSSで定義しています)

他のページもほとんど同じようなズレ方なのですが、
なにか簡単に修正ができるのでしょうか?

Aベストアンサー

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修正する必要があるでしょう。
 さすがにないでしょうが、可能ならHTML4.01strict,XHTML1.0strict,XHTML1.1(XHTML1.1にはtransitinalやframesetはない)・・1999年の勧告以来
【引用】____________ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )]より
 とされてきましたから、strictだとは思いますが・・

 なお、互換モードで一番問題となるのは、IEのスタイルシートのサイズ計算のバグです。
すなわち、コンテナブロックのサイズをpaddin辺の内側ではなくborder辺の内側として計算してしまうことにあります。
 IEを標準にWebページを作成すると良く犯す失敗です。できれば他のウェブ標準ブラウザを使用して作成するほうが無難です。特にFirefoxは開発用ツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )が豊富ですから、この様なときにとても助かります。

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
 DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

 もちろん、HTMLもDOCTYPEに合わせて修...続きを読む

Qテーブルの行の高さを指定する時全てのtdタグに?

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた)<br>

<table border=1>
<tr><td class="test">1</td><td class="test">2</td></tr>
<tr><td class="test">3</td><td class="test">4</td></tr>
</table>

<br><br>

2の例<br>(一番左の列だけclass="test"をいれた)<br>

<table border=1>
<tr><td class="test">1</td><td>2</td></tr>
<tr><td class="test">3</td><td>4</td></tr>
</table>

<br><br>

3の例<br>(スタイルシートは何も指定していない)<br>

<table border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた...続きを読む

Aベストアンサー

テーブルの行の高さ、なので <tr> タグに指定するのが素直でしょうか。

<style>
table tr { height:1em; } /* 全ての行に適用 */
table tr.test { height:3em; } /* 特定の行のみ適用 */
</style>

<table border>
<tbody>
<tr> <td> 1 <td> 2
<tr> <td> 3 <td> 4
<tr class=test> <td> 5 <td> 6
</table>

QcssでIEとFIREFOX(とchrome)の表示が違う

http://www.recipe-de-cooking.com/で
IEで見たときとfirefoxで見たときではレイアウトが異なっています。
中央寄せの状況もブラウザで違い、またコンテンツの幅も違っています。
firefoxでは右端が出っ張った形になっています。(ガタガタ)なぜでしょうか?
解決方法がわからないので教えてください。

Aベストアンサー

IEの横幅 -> width
他 -> width + 左右padding(指定があれば) + 左右border(指定があれば)

全体や広告部分にも該当箇所があるかと思います。
これらプロパティを併用しないようなつくりにするか、
ブラウザ別にスタイルを変えるなど対処してください。

「CSSハック」で検索すると、特定のブラウザに向けて
スタイルを設定する方法を説明するサイトが沢山出るかと思います。

Q同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
(Lunascapeというブラウザで、3種類のエンジンが選べるので他のエンジンにしてみたのです)
問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。

Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。

現状、この重大なエラーを残したまま公開している状態のため、急ぎ直したいのです。

画像は実行したときの症状を、下にはそのソースを載せます。
アドバイス、回答をよろしくお願いします。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
</head>
<body>
<style type="text/css">
<!--
table{
border-collapse: collapse;border-spacing: 0;
width: 60%;
margin-bottom: 30px;
border: 1px solid #DDD;
table-layout:fixed;
}
th{
border: 1px solid #DDD;
color: #333;
padding: 10px 20px;
}
td{
border: 1px solid #DDD;
color: #333;
padding: 5px;
}

.title{ width:12em;}
.compose,.long{ width:4em;text-align:center;}
.value{ width:6em;text-align:center;}

th.genre { background: #E5F2F8;}
-->
</style>
<table>
<tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr>
<tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr>
</table>

</body>
</html>

同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

まったくの初心者ですが、テンプレートを編集してホームページを作りました。
しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。
(Lunascapeというブラウザで、3種類のエンジンが選べるので他のエンジンにしてみたのです)
問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。

Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせると...続きを読む

Aベストアンサー

この場合の幅というのは <table> の幅も含めていますか?
IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、万全を期すならば

html, body { margin: 0; padding: 0; }

を指定した方が良さそうです。(デフォルトスタイルシートのリセット)
width: 60%; は親要素に対しての割合ですから、margin, padding がブラウザ毎に違うと <table> の幅が不統一になります。

> Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。
この辺りでしょうか。

・全てのtable関連要素に margin, padding, border を指定する (デフォルトスタイルシートのリセット)
・em を使いつつ、幅を完全に揃えたいのなら、font-size を指定する (代償にアクセシビリティが下がります。「幅を完全に統一にしたい」という要望なら避けられない問題ですが…。)

デフォルトスタイルシートはあてになりませんので、他にもあやしそうなプロパティを探してリセットしてみてください。

この場合の幅というのは <table> の幅も含めていますか?
IE8, Google Chrome 5 で試したところでは <table> の幅は一致しますが、万全を期すならば

html, body { margin: 0; padding: 0; }

を指定した方が良さそうです。(デフォルトスタイルシートのリセット)
width: 60%; は親要素に対しての割合ですから、margin, padding がブラウザ毎に違うと <table> の幅が不統一になります。

> Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広...続きを読む

Qテーブルの表示がずれます

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
  <tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
<tr>
   <td>テスト</td>
   <td>1</td>
   <td>2</td>
  </tr>
</table>
</body>
</html>
宜しくお願い致します。

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
  <tr>
   <td>テスト</td>...続きを読む

Aベストアンサー

こんにちは。
イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね?全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が1行のものと、2行のものとでは、ページが違うんですよね?
もし、同じページに表示するのであれば、1ページにつき、<html>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

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の仕様でそう決まっているからです。

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qfirefoxで「height: 100%;」と指定しているのに100%にならない

<html>
<body>
<table border=1>
<tr>
<td>
<table border=1>
<tr>
<td rowspan=2 style="height: 10px;">
<a href="#" style="display: block; height: 100%;">

</a>
</td>
<td>

</td>
</tr>
<tr>
<td>

</td>
</tr>
</td>
</tr>
<tr>
<td>

</td>
</tr>
</table>
</body>
</html>

上記のソースで「う」のリンクをセル全てに指定したいです。
IEやchromeではセル全てがリンクになりますがfirefoxは外側の「height: 10px;」の高さしか
リンクになりません。
どうすればfirefoxでもセル全てがリンクになるのでしょうか。

<html>
<body>
<table border=1>
<tr>
<td>
<table border=1>
<tr>
<td rowspan=2 style="height: 10px;">
<a href="#" style="display: block; height: 100%;">

</a>
</td>
<td>

</td>
</tr>
<tr>
<td>

</td>
</tr>
</td>
</tr>
<tr>
<td>

</td>
</tr>
</table>
</body>
</html>

上記のソースで「う」のリンクをセル全てに指定したいです。
IEやchromeではセル全...続きを読む

Aベストアンサー

こんにちは。
height: 100%ってそもそも融通聞かないんですよね。親要素の高さ指定が必ず必要な上、それが基準となり影響してきます。

ソースを見るとaの親要素のtdに10pxと指定しているので、これが基準でaも10pxにしかならないのだと思います。
考えてみれば、囲っている親要素より大きくないのが普通です。
今回はrowspanが絡んできていておかしなことになっているので、本来はFireFoxが正しいのだと思います。

この場合、
①親要素のtdに実際必要な高さ分のpx数を記述するか、
②aのheight:100%を諦め実際に必要な高さ分のpx数を記述するか、
③もし何かしらの理由で(変動するとか)HTMLやCSSに実数を記述できないのであれば、jQueryで親要素のtdの実際(ブラウザ上で表示されている)の高さを取得してaに適用するか

この3つしかないと思います。ただしメルマガとかのソースだと③は無理かも。

ちなみにjQueryの場合は以下の感じ。
ただしクラスを設定していないので、他にこのaとtdのような関係性のところ全てに適用されるので必要に応じてクラス指定が要ります。
【jQuery】
<script>
$(function () {
hsize = $("a").parent().height();
$("a").css("height", hsize + "px");
});
</script>
【説明】
aの親要素の高さを取得
aのcssに取得した高さを実行

tableって表以外は本来使わないほうが良いのですが、例えばECサイト運営とかメルマガのお仕事だと、結構無理やり使ってるところが多いですよね…

頑張ってください。

こんにちは。
height: 100%ってそもそも融通聞かないんですよね。親要素の高さ指定が必ず必要な上、それが基準となり影響してきます。

ソースを見るとaの親要素のtdに10pxと指定しているので、これが基準でaも10pxにしかならないのだと思います。
考えてみれば、囲っている親要素より大きくないのが普通です。
今回はrowspanが絡んできていておかしなことになっているので、本来はFireFoxが正しいのだと思います。

この場合、
①親要素のtdに実際必要な高さ分のpx数を記述するか、
②aのheight:100%を諦め実際に必...続きを読む

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

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

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

Aベストアンサー

<select style="width: 200px">


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

人気Q&Aランキング