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

締切済

質問者：monogusata
質問日時：2008/02/25 00:00
回答数：4件

下記のように、入れ子にしたテーブルを作成しましたが、「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">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： taru_smile
回答日時：2008/09/18 15:12

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

- 0
- 件

通報する

No.3

回答者： tenderfeel
回答日時：2008/02/25 18:37

すいません、先ほどの回答はIEでは対応してないみたいでした。

なので他のブラウザでは出来てるんですが、ＩＥでは外枠が表示されてしまうようです。
ｔｄに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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/02/25 22:44

No.2

回答者： tenderfeel
回答日時：2008/02/25 16:03

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

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

…でいかがでしょうか？

- 0
- 件

通報する

この回答へのお礼

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

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

通報する

お礼日時：2008/02/25 16:45

No.1

回答者： enuenuenu
回答日時：2008/02/25 00:45

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で確認したところ質問者さんの問題とする部分は改善されました。
お試しください。