- ベストアンサー
CSSでのtableの複雑なborder指定の仕様について
- CSSでのtableの複雑なborder指定の仕様について調べています。
- データ量削減のため、colgroupとtrへのCSS指定だけで、tdにはCSSを指定しない方法が理想的ですが、うまくいきません。
- 対応ブラウザはIE6～8のみで構いません。borderの色を変える方法が分からないです。
- みんなの回答 （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>
お礼
回答ありがとうございます。 まずは .table1 td でTD全てにrightとbottomのborder指定をした上で、 色を変えたい枠線に対してのみ、topかleftで指定する、という方法ですね。 自分で調べてみたところ、colgroupはborderが使えないという情報もありましたし、 この方法で行こうと思います。 ありがとうございました。