- 締切済み
テーブル入れ子した時の、テーブル外枠罫線を非表示にしたい
下記のように、入れ子にしたテーブルを作成しましたが、「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>
- monogusata
- お礼率85% (6/7)
- HTML
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- taru_smile
- ベストアンサー率55% (5/9)
<!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>
- tenderfeel
- ベストアンサー率56% (215/379)
すいません、先ほどの回答は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>
- tenderfeel
- ベストアンサー率56% (215/379)
スタイルシートを下記のものに変更 table { margin: 0px; border-collapse: collapse; } table tbody tr td table { border:none; } td {padding: 0px;} …でいかがでしょうか？
お礼
解答ありがとうございます。 しかし、駄目でした。 やはり入れ子にした（AA, BB, 10, 20のテーブル）外枠罫線は残ったままなので、それ以外の線より太くなっています。 結局変わっていません。 当方のやり方がまずいのかな？
- enuenuenu
- ベストアンサー率57% (12/21)
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で確認したところ質問者さんの問題とする部分は改善されました。 お試しください。
お礼
ご回答ありがとうございます。 既述の通り、条件は入れ子を使いたいのです。 あるJavaScript構成でどうしても．．． 以上、よろしくお願い申し上げます。
お礼
tenderfeelさまへ 再度の解答どうもありがとうございます。 無事望んでいたことができました。 あとは、Javaスク追加してもうすこしで完成です。 本当にありがとうございました。