CSSでのtableの複雑なborder指定の仕様について
- CSSでのtableの複雑なborder指定の仕様について調べています。
- データ量削減のため、colgroupとtrへのCSS指定だけで、tdにはCSSを指定しない方法が理想的ですが、うまくいきません。
- 対応ブラウザはIE6～8のみで構いません。borderの色を変える方法が分からないです。
- ベストアンサー
CSSでのtableの複雑なborder指定の仕様について
CSSでのtableの複雑なborder指定の仕様について 現在、以下のようなborder設定を持つtableを作りたいと考えています。 線の太さが違っているのは、border-colorの指定を表しています。 ┏┯┯┳┯┯┳┯┯┓ ┠┼┼╂┼┼╂┼┼┨ ┠┼┼╂┼┼╂┼┼┨ ┣┿┿╋┿┿╋┿┿┫ ┠┼┼╂┼┼╂┼┼┨ ┠┼┼╂┼┼╂┼┼┨ ┗┷┷┻┷┷┻┷┷┛ データ量削減のため、colgroupとtrへのCSS指定だけで、 tdにはCSSを指定しない、という実現方法が理想的です。 ですが、自分で色々と試したものの、どうもうまくいきません。 やむを得ず、tdにCSSクラスを直接指定するにしても、 ある線の色を変えるには、どのtdにどんなCSSを指定すればいいのか、法則が掴めません。 一体どのような仕様になっているのでしょうか。 なお、対応ブラウザはIE6～8のみで構いません。
- mokpok
- お礼率62% (154/245)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ソースに自信はありませんが。。。それらしい見栄えにはなりました。 <html> <head> <style> .table1{ border : solid 2px red; border-collapse: collapse; } .td1{ border-left : solid 2px brown; } .td2{ border-top : solid 2px pink; } .td3{ border-left : solid 2px brown; border-top : solid 2px pink; } .table1 td{ border-bottom : solid 1px orange; border-right : solid 1px orange; padding : 10px; } </style> </head> <body> <table class="table1"> <tr> <td>あ</td> <td>い</td> <td>う</td> <td class="td1">え</td> <td>お</td> <td>か</td> <td class="td1">き</td> <td>く</td> <td>け</td> </tr> <tr> <td>さ</td> <td>し</td> <td>す</td> <td class="td1">せ</td> <td>そ</td> <td>た</td> <td class="td1">ち</td> <td>つ</td> <td>て</td> </tr> <tr> <td>な</td> <td>に</td> <td>ぬ</td> <td class="td1">ね</td> <td>の</td> <td>は</td> <td class="td1">ひ</td> <td>ふ</td> <td>へ</td> </tr> <tr> <td class="td2">ま</td> <td class="td2">み</td> <td class="td2">む</td> <td class="td3">め</td> <td class="td2">も</td> <td class="td2">や</td> <td class="td3">い</td> <td class="td2">ゆ</td> <td class="td2">え</td> </tr> <tr> <td>わ</td> <td>ゐ</td> <td>う</td> <td class="td1">ゑ</td> <td>を</td> <td>ん</td> <td class="td1">ら</td> <td>り</td> <td>る</td> </tr> <tr> <td>が</td> <td>ぎ</td> <td>ぐ</td> <td class="td1">げ</td> <td>ご</td> <td>ざ</td> <td class="td1">じ</td> <td>ず</td> <td>ぜ</td> </tr> </table> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
fxやoperaではcolgroupを利用して枠線の制御ができるけれど、手元のIE6だとcolorなどは効くけれど枠線はダメみたい。 仕方がないので、nth-child…もIEはダメだから、behaviorで処理するのか？ って、どうせならと思い、（↓）こんなのを利用してみました。 http://dean.edwards.name/weblog/2010/03/ie7js-update/ fx3、opera10、IE6で確認。（IE7、8は手元にないので未確認です） 結局、tableにclassを振るだけでOKになった。 （上記サイトから、IE9.jsをDLしてセットしてください） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <!--[if lt IE 9]><script src="js/IE9.js"></script><![endif]--> <style type="text/css"> .t0 { border-collapse: collapse; border : 3px solid #00f; } .t0 td { width: 2em; height: 2em; text-align: center; border: 1px solid #bbb; } .t0 tr:nth-child(3) td { border-bottom: 2px solid #0ee; } .t0 td:nth-child(3), .t0 td:nth-child(6) { border-right: 2px solid #0e0; } </style> </head> <body> <table class="t0"> <tr> <td>1-1</td><td>1-2</td><td>1-3</td> <td>1-4</td><td>1-5</td><td>1-6</td> <td>1-7</td><td>1-8</td><td>1-9</td> </tr> <tr> <td>2-1</td><td>2-2</td><td>2-3</td> <td>2-4</td><td>2-5</td><td>2-6</td> <td>2-7</td><td>2-8</td><td>2-9</td> </tr> <tr> <td>3-1</td><td>3-2</td><td>3-3</td> <td>3-4</td><td>3-5</td><td>3-6</td> <td>3-7</td><td>3-8</td><td>3-9</td> </tr> <tr> <td>4-1</td><td>4-2</td><td>4-3</td> <td>4-4</td><td>4-5</td><td>4-6</td> <td>4-7</td><td>4-8</td><td>4-9</td> </tr> <tr> <td>5-1</td><td>5-2</td><td>5-3</td> <td>5-4</td><td>5-5</td><td>5-6</td> <td>5-7</td><td>5-8</td><td>5-9</td> </tr> <tr> <td>6-1</td><td>6-2</td><td>6-3</td> <td>6-4</td><td>6-5</td><td>6-6</td> <td>6-7</td><td>6-8</td><td>6-9</td> </tr> </table> </body> </html>
関連するQ&A
- テーブルでセルの枠線を消す(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>内の設定だけで消えないのか理由が分かる方、説明お願いします。
- ベストアンサー
- HTML
- CSSでテーブルボーダーを一発指定出来ません！
現在テーブルに対してのCSSを設定しているのですが、私の勘違いなのかうまく出来ません・・・。 例えば縦5×横5列の表が有ったとします。 そこにCSSで四方1pxのボーダーを指定します。 でも、これだけだと表の一番外枠部分にしかボーダーが表示されません・・・。（当然なのかもしれませんが） そこで、CSSを使い中のブロック？部分、<td>全てにボーダーを表示させたいのですが、そのようなことは可能なのでしょうか？ ようは、表の枠線全てをcssで表示させたいのですが、この様な事は可能でしょうか？？ ご存知の方がいましたら、アドバイスいただけますでしょうか？ 宜しくお願いいたします。
- ベストアンサー
- HTML
- cssでtableを指定したい
教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable subtable というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか？
- ベストアンサー
- XML
- CSSでテーブルレイアウトが出来ません！
現在DreamweaverMXでテーブルを作っているのですが、うまく表示されません。というか設定方法がよく分かりません。 テーブルは2列で10行のテーブルを作っているのですが、CSSから枠線の表示部分の設定を行っても反されません。現在はテーブルの外回りの線が表示されるだけなのです。 CSSは以下になります。 .maintable { font-size: small; padding: 5px; border: 1px solid #666666; text-align: left; height: auto; width: 400px; } 中身の枠線を表示するにはやはりtdやtrのCSS指定を行わないといけないのでしょうか？しかしホームページのメニュー部分をテーブルで作っているのでそちらにも反映されてしまい、表示が変になってしまいます。 もしtdやtrにclass指定をする場合、すべてのtdやtrに指定していくのでしょうか？そうすると、指定する数が沢山になってしまうのですが・・・。 この問題について、お分かりになられる方がいらっしゃいましたら、よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- NN使用でのCSSでのBORDERについて
IEで TD.TD1{BORDER-STYLE:SOLID; BORDER-COLOR:CORNFLOWERBLUE; BORDER-WIDTH:1; BACKGROUND-COLOR:ALICEBLUE;} のように指定すれば、細い線で囲まれたものをかくことができますが、NNでは、背景色は有効になっても線が出てきません。 これを有効にするにはどのようにしたらいいのでしょうか？ また、IE・NNで表示結果が違うCSSの一覧などが載ってるような便利なサイトがもしあったら教えてください。
- ベストアンサー
- CSS
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
- tdに指定したborderの隙間について
tdにborder（dotted）を指定して線を引きたいのですが、 セルの境目に隙間が空いてしまいます。 《html》 <table class="information"> <tr> <td class="infoborder_u">営業時間</td> <td class="infoborder_u">月曜～金曜</td> <td class="infoborder_u">9：00 ～ 19：00</td> </tr> 《css》 .information{ width: 350px; height: 180px; background-color: #808080; margin: 10 0 0 0px; border-collapse: collapse; ｝ .information td{ padding-left: 10px; } .infoborder_u{ border-style: dotted; border-width: 1 0 0 0px; border-color: #000000; } 回避方法はないでしょうか？
- 締切済み
- HTML
- CSSのテーブルの件で
はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │ A │ B │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSの部分リセットについて
サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。 ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。 該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。 ＝＝＝＝CSS内容＝＝＝＝ table { border: 0px none; } td { border: 0px none; border-collapse: collapse; } /*普通にtableを書くとボーダーが消えてしまうので個別に指定*/ .reset table{ border: 3px ridge; } .reset td{ border: medium ridge; border-collapse: collapse; } ＝＝＝＝HTML＝＝＝＝ <div class="reset"> <table> <tr> <td>ああああああ</td> <td>ああああああ</td> </tr> <tr> <td>いいいいいい</td> <td>いいいいいい</td> </tr> </table> </div> 元のtableの指定はサイト全体に影響が出てしまうため、修正することができません。 いまさらながらものすごく後悔していますが・・・。 また、今後の使いまわしを考えると、IDの指定もできません。 無理矢理何とかできないかと思い、上記の方法を取りましたが、やはりうまくいきません。 理想としては、指定した箇所のみCSSの影響がなくなるということですが、いろいろ調べても見つかりませんでした。 根本的に作り直しした方がいいのは理解していますが、何か方法があればと思い質問させていただきました。 どなたか良い案がありましたらお助けください。
- ベストアンサー
- HTML
- 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
お礼
回答ありがとうございます。 まずは .table1 td でTD全てにrightとbottomのborder指定をした上で、 色を変えたい枠線に対してのみ、topかleftで指定する、という方法ですね。 自分で調べてみたところ、colgroupはborderが使えないという情報もありましたし、 この方法で行こうと思います。 ありがとうございました。