- ベストアンサー
テーブルでセルの枠線を消す(CSS)
表をつくり、下記の方法でセルの枠線を消しています。 <html> <head> <style type="text/css"> <!-- td{border-color:black;} --> </style> </head> <table border> <colgroup span=2 width=50></colgroup> <tr> <td>a</td> <td style={border-style:none;}>aa</td> </tr> <tr> <td>b</td> <td>bb</td> </tr> </table> </html> セルのタグ<td>内にスタイルシートを設定するだけで消せると思ったのですがうまくいかず、 先頭で設定するスタイルシートで<td>のボーダー設定をすると何故か消す事が出来ました。 なぜ<td>内の設定だけで消えないのか理由が分かる方、説明お願いします。
- kata_kori
- お礼率100% (13/13)
- HTML
- 回答数3
- ありがとう数12
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こちらの環境(WinMe)のIE6では、質問文中のソースの、head内のスタイル要素を除いた分のソースで、aaという文字が入るセルの内側の境界線は消えるようです。 style要素の「td{border-color:black;}」この部分が無くてもです。 今一度、このスタイルシートを削って、再度表示を検証してみてはいかがでしょうか? また、#1でも指摘されていますが、 <td style={border-style:none;}>aa</td> この記述は誤りです。 <td style="border-style:none;">aa</td> に直す必要があるでしょう。 IEでは拡大解釈して{}でスタイルシート部分を括っても問題なく解釈してくれますが、Netscapeなどでは不正な書式としてこの部分の指定が完全に無視される可能性があります(こちらの環境のNetscape 7.1では無視されました)。 head内のstyle要素では「セレクタ {プロパティ:設定値;}」という形で記述しますが、タグ内のstyle属性としては「style="プロパティ:設定値;"」と記述するのが正当でしょう。 また、タグ内の属性については、その値はすべて引用符で括ることが推奨されていますので、できる限り""で括るようにした方が無難です。 場合によっては、ブラウザがその属性を正常に解釈しなくなることもあります。 スタイルシートをタグ内で直接設定する場合や、スクリプトをイベントハンドラに記述する場合には特に、注意が必要と思います。 参考になれば。
その他の回答 (2)
- sara-77
- ベストアンサー率20% (2/10)
テーブルのボーダーを消したい時には<table border="0">の記述が必要です。 またタグの意味（？）は下記の通りです。 <table> ：テ－ブル開始タグ <tr> ：行を増やすタグ <td> ：列を増やすタグ </td> ：増やした列を閉じるタグ </tr> ：増やした行の閉じるタグ </table> ：テ－ブル終了タグ だから、こんな感じに書けばオッケーじゃないかな。 --- <html> <head> <style type="text/css"> <!-- スタイルテキストの記述 --> </style> </head> <body> <table border="0" height="●●●（テーブルの高さ指定）" width="●●●（テーブルの幅指定）"> <tr> <td height="●●●（セルの高さ指定）" width="●●●（セルの幅指定）"> ～ </td> <td height="●●●（セルの高さ指定）" width="●●●（セルの幅指定）"> ～ </td> </tr> <tr> <td>～</td> <td>～</td> </tr> </table> </body> </html> --- 参考URLのタグサイトさんはとても分かりやすいのでお勧めです。
- 参考URL：
- http://chips.jpnet.biz/
お礼
ご回答ありがとうございます。 私が知りたかったのは「aa」と表示されるセルの枠線だけを消す方法についてです。 <table border="0">と指定すると、テーブルの外枠と全セルの枠線が消えてしまいますね。 ちょっと説明不足だった様で申し訳ありませんでした。
<td style={border-style:none;}>aa</td> ↑の行の記述がヘンです。 <td style="border-style:none;">aa</td> 「 { } 」←英字のカッコではなく、 「 " " 」←引用符を使ってください。
お礼
ご意見ありがとうございます。 >「 { } 」←英字のカッコではなく、 >「 " " 」←引用符を使ってください。 私がスタイルシートを初めて勉強したサイトでは、タグ内でも{ }で囲んでいたので、 どちらでも良いと解釈して{ }を使用しています。 それによる不具合が出た事は無いのですが、間違いなのでしょうか？
関連するQ&A
- cssでテーブルで細い線
スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線（td？）が二重になってしまいます 一線にするのにどのようにすればイイですか？ ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>
- ベストアンサー
- CSS
- 特定のテーブルのみ枠線の色を消したい
スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか？ <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。 特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？
- ベストアンサー
- CSS
- Tableタグ内のspan styleが適応されない
先日ブログを開設して、表を作りたかったのでtableタグを使ったのですが、表中の文字が何故か10ptにならず、およそ15ptくらい大きくなってしまいます。 どこかスタイルシート（HTML?)がおかしいのでしょうか？ 詳しい方、ご教授の程お願いいたします。 下記の様に設定しました。 <table border="1" cellpadding="0" cellspacing="0" width="430"><colgroup> <col align="center"><col span="5" align="center"> <span style="font-size:10pt;"><tr><th>・・・ ・・・</td></tr></span></col></colgroup></table>
- ベストアンサー
- HTML
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- テーブルの枠線の色を指定したい。
http://www.kanzaki.com/docs/html/htminfo16.html を参考に、 --------------------------------------- <table> <tr> <td>りんご</td> <td>甘酸っぱい</td> <td>おおむね赤</td> </tr> <tr> <td>なつみかん</td> <td>かなり酸っぱいと思う</td> <td>たいてい黄色</td> </tr> </table> --------------------------------------- と言うテーブルに対して、 --------------------------------------- <style> table { border-collapse: collapse; } td { border: solid 1px; padding: 0.5em; } </style> --------------------------------------- と記述して、枠線を付けたのですが、枠線の色を指定する事は出来ますか？ 赤にしたいです。ご回答よろしくお願いします。
- ベストアンサー
- HTML
- tableセルに色を付ける
tableセルに色を付けます。 で、行で指定しようとtrタグにbgcolorをいれました。 ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。 セルを結合させたりしたりしてることが影響あるのでしょうか？ieのバグですかね？ コレを解決するには、trで色を付けるのを諦めて、セルごと（tdやth）に指定していくしかないのでしょうか。 スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">１</td> <td>あ</td> </tr> <tr> <td>い</td> </tr> <tr bgcolor="red"> <td>２</td> <td>う</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS
- CSS tableの色
スタイルシートについてお聞きします。 htmlの<table>の<tr>の枠線の色を変更したいのですが、CSSの場合はどのように記述すればよろしいのでしょうか？ よろしくお願いします。 htmlの場合 <table> <tr><td bordercolor="FFFFFF">内容</td></tr> </table>
- ベストアンサー
- HTML
- FireFoxでborder-collapseを使うと余計な枠線が表示される
FireFoxでborder-collapse:collapseを指定すると、余分な枠線が表示されてしまいます。 IEでは問題ありません。 <HTML> <HEAD> <title>TEST</title> <style type="text/css"> table { border-collapse: collapse; } td { border: 1px solid black; } td.none{border:none;} </style> </HEAD> <BODY> <table> <tbody> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td class=none> </td><td td class=none> </td><td class=none> </td><td class=none> </td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- テーブル・セル枠線の色
下記のようにテーブルを組むと、IEでは1pxの赤いボーダーで表示されるのですが、 ネスケだとグレーの太い線になってしまいます。 どのように変えたらよいのでしょうか。 <TABLE border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF5F8D" width="100%"> <TR> <TD width="50%"> </TD> <TD width="50%"> </TD> </TR> </TABLE>
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 私の作業環境ではIE5.5sp2を使用しています。 IE6で試してみた所、セルの枠線が消えるのを確認できました。 IEのVer違いの影響あたりを調べてみたいと思います。 { }の件につきましてはIEの柔軟さに助けられていた様ですね。 今後は引用符を使う様徹底したいと思います。