みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

テーブル入れ子した時の、テーブル外枠罫線を非表示にしたい

下記のように、入れ子にしたテーブルを作成しましたが、「AA, BB, 10, 20」のテーブル外枠線が太くなってしまいます。全て細い線で表示させるには、入れ子にしたテーブル外枠罫線を非表示にすれば良いのかなと思うのですが、どうすればよろしいでしょうか?
また他によい方法があればアドバイスお願いします。

条件として、
(1)入れ子でテーブルを作成
(2)教えて!gooのように細い線を使用
です。
よろしくお願いします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE TYPE="text/css">
<!--
TABLE {
margin: 0px;
border: 1px solid #ff0000;
border-collapse: collapse;
}

TD {
padding: 0px;
border-style: solid;
}
-->
</STYLE>
<TITLE></TITLE>

</HEAD>
<BODY>
<TABLE border="1">
<TBODY>
<TR>
<TD>みかん</TD>
<TD>バナナ</TD>
<TD>パイン</TD>
</TR>
<TR>
<TD>やさい</TD>
<TD>
<TABLE width="100%" border="1">
<TBODY>
<TR>
<TD>AA</TD>
<TD>BB</TD>
</TR>
<TR>
<TD>10</TD>
<TD>20</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD>りんご</TD>
</TR>
<TR>
<TD>いちご</TD>
<TD>すいか</TD>
<TD>れもん</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

投稿日時 - 2008-02-25 00:00:17

QNo.3807119

困ってます

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE TYPE="text/css">
<!--
TABLE {
margin: 0px;
border: 1px;
border-collapse: collapse;
}

TD {
padding: 0px;
}
-->
</STYLE>
<TITLE></TITLE>

</HEAD>
<BODY>
<TABLE border="1" bordercolor="#ff0000">
<TBODY>
<TR>
<TD>みかん</TD>
<TD>バナナ</TD>
<TD>パイン</TD>
</TR>
<TR>
<TD>やさい</TD>
<TD>
<TABLE width="100%" border="1" bordercolor="#ff0000" frame="void">
<TBODY>
<TR>
<TD>AA</TD>
<TD>BB</TD>
</TR>
<TR>
<TD>10</TD>
<TD>20</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD>りんご</TD>
</TR>
<TR>
<TD>いちご</TD>
<TD>すいか</TD>
<TD>れもん</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

投稿日時 - 2008-09-18 15:12:56

ANo.3

すいません、先ほどの回答はIEでは対応してないみたいでした。
なので他のブラウザでは出来てるんですが、IEでは外枠が表示されてしまうようです。
tdにclassをつけれるなら、無理やりborderで線を引いてしまう方が早いかもです。

TABLE {
margin: 0px;
border-left:solid 1px red;
border-top:solid 1px red;
}
table td {
border-bottom:solid 1px red;
border-right:solid 1px red;
}
table tbody tr td table {border:none;}
table tbody tr td table td.r {border-right:none;}
table tbody tr td table td.b {border-bottom:none;}
TD {padding: 0px;}
-->
</STYLE>
</head>

<body>
<TABLE border="0" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD>みかん</TD>
<TD>バナナ</TD>
<TD>パイン</TD>
</TR>
<TR>
<TD>やさい</TD>
<TD>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<TBODY>
<TR>
<TD>AA</TD>
<TD class="r">BB</TD>
</TR>
<TR>
<TD class="b">10</TD>
<TD class="r b">20</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD>りんご</TD>
</TR>
<TR>
<TD>いちご</TD>
<TD>すいか</TD>
<TD>れもん</TD>
</TR>
</TBODY>
</TABLE>

投稿日時 - 2008-02-25 18:37:17

お礼

tenderfeelさまへ
再度の解答どうもありがとうございます。
無事望んでいたことができました。
あとは、Javaスク追加してもうすこしで完成です。
本当にありがとうございました。

投稿日時 - 2008-02-25 22:44:34

ANo.2

スタイルシートを下記のものに変更

table {
margin: 0px;
border-collapse: collapse;
}
table tbody tr td table { border:none; }
td {padding: 0px;}

…でいかがでしょうか?

投稿日時 - 2008-02-25 16:03:43

お礼

解答ありがとうございます。

しかし、駄目でした。
やはり入れ子にした(AA, BB, 10, 20のテーブル)外枠罫線は残ったままなので、それ以外の線より太くなっています。
結局変わっていません。
当方のやり方がまずいのかな?

投稿日時 - 2008-02-25 16:45:06

ANo.1

styleを用いて外枠を消す方法もありますが、あまりにも面倒です。
中にテーブルを挟まず、colspanとrowspanで四方のセルを結合する方法をおすすめします。

<table border="1">
<tbody>
<tr>
<td>みかん</td>
<td colspan="2">バナナ</td>
<td>パイン</td></tr>
<tr>
<td rowspan="2">やさい</td>
<td>AA</td><td>BB</td>
<td rowspan="2">りんご</td>
</tr>
<tr>
<td>10</td><td>20</td>
</tr><tr>
<td>いちご</td>
<td colspan="2">すいか</td>
<td>れもん</td></tr>
</tbody></table>

いかがでしょうか?
タグの法則上、10・20の前にりんごのセルが入りますので注意してください。
Macユーザーですのでwinでも同じように表示されるか不安ですが、IEとsafariで確認したところ質問者さんの問題とする部分は改善されました。
お試しください。

投稿日時 - 2008-02-25 00:45:08

お礼

ご回答ありがとうございます。
既述の通り、条件は入れ子を使いたいのです。
あるJavaScript構成でどうしても...
以上、よろしくお願い申し上げます。

投稿日時 - 2008-02-25 09:08:04

あなたにオススメの質問