マルシェル新規登録で5000円分当たる

お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものをCSSで作りたいのですが、
どのようにしたらいいのでしょうか。
現在のページの一部は
<div id="main">
<h1>タイトル</h1>
  <table border="1">
<p>
本文
</p>
<tr>
<td colspan="2"><h2 align="center">○○○</h2></td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
~行が続きますが省略~
</table>
</div>
のようになっています。

ちなみに cssのmainは「text-align:center;」を指定しておりますが、
IE8にしたところテーブルが左寄せになってしまいました。

なるべく多くのブラウザで同じような配置になるようにしたいのですが
どうしたらよいでしょうか。よろしくお願いいたします。

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

A 回答 (2件)

No.1さんの方法では、table内部のテキストが中央ぞろえになってしまい、


「テーブルの内容は左揃え」
という質問者さんのご要望を満たすことができません。

以下でどうぞ。

(1)
div#main{
text-align:center;
}

(2)
div#main table{
margin-left:auto;
margin-right:auto;
text-align:left;
}

<解説>
div、table、pなどブロック要素をセンタリングするには、左右のmargin(外余白)をautoにすることで、左右均等に外余白が設定され、ブロックがセンタリングされます(2)。
しかし、8より前のIEではmarginのautoを正しく解釈してくれません。

text-align:centerでブロック要素がセンタリングされない(これでセンタリングされるのはテキストや画像などのインライン要素のみ)のは正しい動作なのですが、8より前のIEではなぜかtext-align:centerでブロック要素がセンタリングされてしまうので、このバグを利用して、div#mainにtext-align:centerを設定して8より前のIEでセンタリングされるようにします(1)。
しかしこれでは、tableの中のテキストまでセンタリングされてしまいますので、div#main配下のtableにtext-align:leftを指定します(2)。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
No1さんのソースを見て、ぱっと直感で編集したら
思い通りになったのですが、半分しか理解していなかったため
解説がとても役立ちました。ありがとうございます。

お礼日時:2009/11/05 17:46

cssの記述に



div#main, div#main table {
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

~を適当に追記してみて下さい。
    • good
    • 0
この回答へのお礼

解凍ありがとうございます。いただいたソースを編集して
div#main table {
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}
にしたところ、うまくいきました。ありがとうございました。

お礼日時:2009/11/05 17:43

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

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

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

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

QIE8ではtext-align: center;でdivタグが中央にならない。改善策は?

IE8ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。
http://oshiete1.watch.impress.co.jp/qa4989799.html

上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。
CSSでは以下のように記述:
div.center {
width: 80%;
margin-right: auto;
margin-left: auto;
}

HTMLではセンタリングさせたいdiv要素を以下のように記述:
<div class="center">文章等<div>

<質問1>
ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div>
を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか(width: 80%はdivタグのセンタリングには特に必要ないのですか?なぜ、width: 80%が記述されているのか分かりません。)?この80%という値はどこから導き出されたのでしょうか(なぜ、例えば60%、70%等ではだめなのですか?)?

また、bodyタグをセンタリングしたい場合は、どうですか?CSSにwidth: 80%;が必要なのでしょうか?

<質問2>
「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか?margin:0 autoの場合、上下のマージンも0(無し)となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが?「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか?
また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか?
<divタグをセンタリングしたい場合>
CSSでは以下のように記述:
div.center {
width: 80%;
margin:0 auto
}
上記の記述で
div.center {
width: 80%;
margin-right: auto;
margin-left: auto;
}
と全く同じ表示になるのでしょうか?

<bodyタグをセンタリングしたい場合>
CSSでは以下のように記述:
body {
width: 80%;
margin:0 auto
}
上記の記述で
body {
width: 80%;
margin-right: auto;
margin-left: auto;
}
と全く同じ表示になるのでしょうか?


<質問3>
IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか?
以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか?
{
text-align: center;
margin-right: auto;
margin-left: auto;
}
又は
{
text-align: center;
margin:0 auto;
}

関連サイト等あれば、そちらも教えてください。

よろしくお願いします。

IE8ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。
http://oshiete1.watch.impress.co.jp/qa4989799.html

上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。
CSSでは以下のように記述:
div.center {
width: 80%;
margin-right: auto;
margin-left: auto;
}

HTMLではセンタリングさせたいdiv要素を以下のように記述:
<div class="center">文章等<div>

<質問1>
...続きを読む

Aベストアンサー

回答した本人です。
まず、私の回答の間違いを1つ。

HTMLではセンタリングさせたいdiv要素を以下のように記述:
<div class="center">文章等<div>
の部分で、終了タグに"/"が入っていませんでした。
正確には
<div class="center">文章等</div>
です。

<質問1>
80%と記載した意味は特にありません。私が回答する前の回答者様が80%と記載されていましたので、それを使わせていただいただけです。
widthプロパティに指定する値は、60%でも70%でも、1000pxでも800pxでも何でもいいです。

<質問2>
これも私が回答する前の回答者様の記載を使わせていただいただけです。div要素だけで考えれば、どちらでも同じだと思います。
デフォルトである程度のマージンが付く要素もありますので、個人的には
margin:0 auto;
と記載する方がいいと思います。
(各ブラウザのデフォルト値を上書きして、ブラウザの違いによる表示に違いを生じさせないため)

body要素は、ブラウザの表示領域全体を表すものなので、body要素をセンタリングする意味はありません。

div.center {
width: 80%;
margin:0 auto
}
は、表示領域全体の80%の幅の領域をセンタリングさせるためにdiv要素を使用する(表示領域全体の10%分左右に余白をつける)為のものです。

<質問3>
text-align:center;
はセンタリングさせたい要素の親要素に指定しなければなりません。
http://nagomin0123.web.fc2.com/centering/m_centering.html
では、p要素(オレンジ色の部分)をセンタリングさせるためにp要素に
margin:0 auto;
を指定し、その親要素であるdiv要素(青色の部分)に
text-align:center;
を指定しています。

回答した本人です。
まず、私の回答の間違いを1つ。

HTMLではセンタリングさせたいdiv要素を以下のように記述:
<div class="center">文章等<div>
の部分で、終了タグに"/"が入っていませんでした。
正確には
<div class="center">文章等</div>
です。

<質問1>
80%と記載した意味は特にありません。私が回答する前の回答者様が80%と記載されていましたので、それを使わせていただいただけです。
widthプロパティに指定する値は、60%でも70%でも、1000pxでも800pxでも何でもいいです。

<質問...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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

QIEでCSSの中央寄せが効かない

common.cssという外部CSSファイルで
.main{
width:800px;
margin:0 auto;
}
としています。
HTMLを簡単に書くと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>test</title>
<meta content="text/javascript" http-equiv="Content-Script-Type">
<link media="all" type="text/css" rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="main">
ここに中央寄せになった記述
</div>
</body>
</html>
としています。
firefoxでは中央寄せになりますが、IE8では中央によりません。
どのようにしたら良いでしょうか?

common.cssという外部CSSファイルで
.main{
width:800px;
margin:0 auto;
}
としています。
HTMLを簡単に書くと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>test</title>
<meta content="text/javascript" http-equiv="Content-Script-Type">
<link media="all" type="text/css" rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="main">
...続きを読む

Aベストアンサー

手元にIE8がないので実際の検証はできませんが、IE8にはDOCTYPE スイッチとはまた異なる3種類のモード・スイッチが存在する様です。
【参考】http://standards.mitsue.co.jp/archives/001326.html

上記から引用ここから---------------------------------------------------------------------------
IE8には3つのレンダリングモードが存在します。

IE8モード
 CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。
IE7モード
 IE7の標準準拠モードと同じ
IE5モード
 IE7やIE6の互換モードと同じ
上記から引用ここまで---------------------------------------------------------------------------

で、更に下記のコンテンツには、どの様な条件下でどの様なモードになるか、の検証結果が一覧になっています。
【参考】http://hxxk.jp/2008/09/29/0118#sub-20080929-06
上記の「DOCTYPE スイッチの一覧表」という項目を見て下さい。この検証結果に依ると、質問者様のHTMLは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ですから、この場合、IE8は「IE5モード」になっている事になります。上記の引用に説明があります通り、IE5モードというのはIE7やIE6の「後方互換モード」と同じ挙動をします。
この「IE7やIE6の後方互換モード」においては、CSSの本来の仕様に準拠しない表示が数多く出てきてしまいます。例えば、”margin: auto;”が無効になるのもその一つです(その他にも沢山やっかいなバグが…下記をご覧になってみて下さい)。
【参考】http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=0

つまり、現在の質問者様の検証環境では”margin: auto;”が効いていない事になりますので、当然「中央寄せ」にはなりません。
DOCTYPEを変えられる様なら、(IE8が標準準拠モードで挙動するものに)変えてしまった方が良いでしょう。変えられないのであれば、IEの後方互換モード対策として、CSSを以下の様に変更してみて下さい。

body {
text-align: center;
}
.main {
width:800px;
margin: 0 auto;
text-align: left;
}

IE6時代からよく使われる対処法の一つです。

手元にIE8がないので実際の検証はできませんが、IE8にはDOCTYPE スイッチとはまた異なる3種類のモード・スイッチが存在する様です。
【参考】http://standards.mitsue.co.jp/archives/001326.html

上記から引用ここから---------------------------------------------------------------------------
IE8には3つのレンダリングモードが存在します。

IE8モード
 CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。
IE7モード
 IE7の標準準拠モードと同じ
IE5モード
 IE7やIE6の互換モード...続きを読む

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qform input テキストを上下中央に表示したい

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style><!--

form input {
margin-bottom:10px;
color:#fff;
border:none;
font-size:12px;
}

form input.mlmg-text {
width:150px; height:26px;
background-color:green;
padding:2px 5px;
text-align:center;
vertical-align:center;
}

form input.mlmg-buttton {
width:50px; height:30px;
color:#fff; background-color:blue;
vertical-align:bottom;
}
--></style>
</head>

<body>
<form method="post">
<input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい"><input type="button" class="mlmg-buttton" name="join" value="GO"><br />
<input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう"><input type="button" class="mlmg-buttton" name="resign" value="GO">
</form>
</body>
</html>

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

...続きを読む

Aベストアンサー

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<style type="text/css">
<!--
ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
zoom: 100%;
margin-bottom: 10px;
}
ul.hoge li:after {
display: block;
clear: left;
height: 0;
visibility: hidden;
content: "";
}
ul.hoge input {
float: left;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
border: none;
color: #fff;
font-size: 12px;
}
ul.hoge input.mlmg-text {
width: 150px;
height: 1em;
padding: 0.5em;
background-color: green;
}
ul.hoge input.mlmg-buttton {
width: 50px;
height: 2em;
background-color: blue;
}
-->
</style>
</head>

<body>

<form method="post" action="#">
<ul class="hoge">
<li><input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい" /><input type="button" class="mlmg-buttton" name="join" value="GO" /></li>
<li><input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう" /><input type="button" class="mlmg-buttton" name="resign" value="GO" /></li>
</ul>
</form>

</body>
</html>
----------------------------------------------------------------------
ポイントは以下の様な点です。

・inputをulの子要素としてマークアップ(内容を見たところ、送信ボタンのリストの様ですので)。
・inputの余白や行の高さ等を初期化して、textタイプとbuttonタイプのベースのスタイルを揃える。
・inputをfloatで横並びにさせるので、親要素のliで回り込み状態をクリア。
・textタイプとbuttonタイプの高さを揃える。高さは相対的に計算ができる様にemで指定。
buttonタイプの場合は描画領域の高さに対して自動的にセンタリングされるので2emとし、textタイプの場合は要素(valueの値の文字部分)の高さを1emと考え、残りの1emを半分づつ上下paddingとして追加。

いかがでしょうか?

※今回の場合、"vertical-align: middle;"はinputの描画領域(ボックス)とvalueの値の文字部分との位置関係を示すものではないので、実現したいスタイルの為に適切なプロパティではありません。

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" ...続きを読む

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テーブルの表示がずれます

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>タグは一組です。(あくまでも基本的に、ですが)
これが、直接行がずれるっていうことにはならないと思いますけど…。

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


人気Q&Aランキング