- 締切済み
テーブル入れ子した時の、テーブル外枠罫線を非表示にしたい
下記のように、入れ子にしたテーブルを作成しましたが、「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構成でどうしても．．． 以上、よろしくお願い申し上げます。
関連するQ&A
- 入れ子にしたテーブルの罫線について
htmlとcssを学習し始めた者です。 下記のような表を作りましたが 罫線が2重になってしまいます。 この罫線をダブらないようにしたいのです。 一番左の列で言えば、外枠を残し、100の上、左、右 を消し、200の左右を消し、300の左、右、下を消し 一本の線で書かれた表にしたいと考えています。 ご教示くださるようお願いいたします。 <LINK href="style.css" type="text/css" rel="stylesheet"> <table> <tr> <td> <table> <tr><td>100</td></tr> <tr><td>200</td></tr> <tr><td>300</td></tr> </table> </td> <td> <table> <tr><td>101</td></tr> <tr><td>201</td></tr> <tr><td>301</td></tr> <tr><td>401</td></tr> <tr><td>501</td></tr> </table> </td> <td>12345<br>67890 </td> <td> <table> <tr><td>102</td></tr> <tr><td>202</td></tr> <tr><td>302</td></tr> <tr><td>402</td></tr> </table> </td> </tr> </table> style.css table{ border-collapse: collapse; border: 1px solid #000000; line-height:130%; margin:auto; border-spacing:0; } td{ border: 1px solid #000000; padding:5px;}
- ベストアンサー
- HTML
- tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
- 特定のテーブルにだけ任意の書式を適用するHTMLかCSS
特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル（区画１～区画４）には罫線なし、 外枠（田の字）だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか？ 【解決案１】こうすると、入れ子テーブル（区画１～区画４）まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案２】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案３】外枠（田の字）だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね？ <table border="1" style="border-collapse: collapse" bordercolor="#111111"> 外枠（田の字）だけに、IDをつけたり識別して、効率よく処理できませんか？ <html> <head> <style TYPE="text/css"> <!-- --> </style> </head> <body> <table cellpadding=10> <tr> <td> <table cellpadding=10><tr><td>区画１</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画２</td></tr></table> </td> </tr> <tr> <td> <table cellpadding=10><tr><td>区画３</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画４</td></tr></table> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブル（表）の表示について
ブラウザ（現在わかっているのはIE6、7）によって、表の表示が異なる事に悩んでます。 例えば、 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#B2DFEE;text-align:left;margin:15px 15px 15px 15px ; float: left;"><tbody><tr> <td style="border:1px solid #000000" colspan="5"><div align="center"><b>○○</b></div></td> </tr><tr> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr></tbody></table> のような記述だと、右側の罫線が表示されません。 私はFirefoxを使っていて安心していたのですが、友人に指摘されて困っています。 作成した環境はwin xp MCE 2002 sp3です。 ちなみにSafariではきちんと表示されていました。 どこを直せばいいのかどなたか教えてください。 宜しくお願い致します。
- ベストアンサー
- HTML
- テーブルに関する質問です。
テーブルに関する質問です。 wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為 試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが やはり同じ現象が起き、思った通りのレイアウトにならないです。 一行目のテーブルと二行目のテーブルはくっつけて、 二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが (1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって 間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、 (2)の白いborderをセルの右側だけに表示させるという方法では、 Firefoxでは思った通りのレイアウトなのですが、 IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。 色によっては誤魔化かされて付き出てない様に見えるのですが。 どうしたら良いでしょうか？ よろしくお願いします。 (1) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> </tbody> </table> </BODY> </HTML> (2) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> </tbody> </table> </BODY> </HTML>
- ベストアンサー
- CSS
- TABLE（表）を横に並べたいのですが
こういった表↓（実際はもっと縦が長いです）をhtmlで少し間隔をあけて横に並べて表示したいのですが、どのようにすればいいのでしょうか？可能なのでしょうか？ 宜しくお願い致します。 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#ffffff;text-align:center"><tbody><tr> <td style="border:1px solid #ffcccc" colspan="3">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr></tbody></table>
- ベストアンサー
- HTML
- スタイルシートテーブルの罫線を細くしたい
例えば以下のようにHTMLを書いた場合、 tableとtdのスタイルシート指定により、 外枠と内枠で罫線がかさなり、 若干太くなってしまいます。 細くしたいのですが、どうすれば出来るのでしょうか？ <table style="{border:1px solid #000000;border-spacing:0px}"> <tr> <td style="{border:1px solid #000000;padding:0px}">あああ </td> <td style="{border:1px solid #000000;padding:0px}">いいい </td> </tr> </table>
- ベストアンサー
- その他（インターネット・Webサービス）
- ブラウザによって罫線の表示のされ方が異なるのですが。
ブラウザによって罫線の表示のされ方が異なるのですが。 下記ソースで、IE8で表示するとイメージの周りの黒線が消せているのですが、Firefox3.6.8だと黒線が見えます。 いずれのブラウザでも罫線を消したいのですが、どう記述したらいいでしょうか？ <html> <head> <title>test</title> <style type="text/css"> table,td,th,tr { border-collapse: collapse; border: 1px solid #000000; } .nobd { border: 0px solid #ffffff; } </style> </head> <body> <table border="0" cellspacing="0" cellpadding="0" class="nobd"> <tr> <td class="nobd"> <form> <input name="login" type="image" src="img1.gif" alt="ログイン" width="200" height="100"> </form> </td> </tr> </table> </table> </body> </html>
- ベストアンサー
- HTML
- IEとネスケの表示の違いを直したい
下記のように ページ上部、左端ともに隙間を空けずテーブルを組んだつもりなのですが、 IEではピッタリとくっつくのに、Netscapeで見ると、5pxくらい間があいてしまいます。 どこを直したらいいのでしょうか。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>ページ</TITLE> </HEAD> <BODY topmargin="0" leftmargin="0"> <TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" bgcolor="#000000"> <TR> <TD width="100%"> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- テーブルの角を丸くして、立体的に
先日、IEでも閲覧可能で、 テーブルの線を細くするスタイルシートを このように教えて頂きました。 このスタイルシートから、 テーブルの角を丸くして、 立体的にする書き方を教えて頂けると とっても助かります。 －－－－－－－－－－－－ <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"><!-- table.WebDesign{ border-collapse: collapse; width: 400px;} table.WebDesign,table.WebDesign td{border:solid 1px #1C79C6;} --></style> </head> <body><div> <table class="WebDesign"> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> <tr><td>Webデザイン</td><td>Webデザイン</td></tr> </table> </div></body></html>
- ベストアンサー
- CSS
お礼
tenderfeelさまへ 再度の解答どうもありがとうございます。 無事望んでいたことができました。 あとは、Javaスク追加してもうすこしで完成です。 本当にありがとうございました。