- 締切済み
テーブルの縦罫線を1本だけ細くしたい
5列×150行のテーブルがあるのですが、2列目と3列目の間の縦罫線だけを他の罫線より細くしたいのです。 「colまたはcolgroup要素にスタイルシートを設定すればOK」と安易に考えていたのですが、いざ設定してみると全く効かない。背景色の設定は反映されるのにボーダーの設定はダメです。 もちろん、セル一つ一つに設定すれば可能ですが、どうもスマートじゃないなと思うのです。何か手はありますか？
- HTML
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- t_freak
- ベストアンサー率70% (12/17)
スタイルシートを table.table5x150{ border:1px solid #000000; } table.table5x150 td{ border:1px solid #000000; } table.table5x150 td.hosoi{ border-right:none; } として、2列目のセルだけclass="hosoi"を指定。 <table class="table5x150" cellspacing="0"> <tr> <td>～</td> <td class="hosoi">～</td> <td>～</td> <td>～</td> <td>～</td> </tr> <!-- （以下繰り返し） --> </table> これでできましたが、"スマートじゃない"部類でしょうか？？
- yambejp
- ベストアンサー率51% (3827/7415)
＞背景色はcolへの設定が活きたので高をくくっていたのですが・・・ イメージとしてはcolにつけた背景色はtdに色がついていなければ 透けて見えている・・・ということなのでしょう colのborderはブラウザ依存なので見えないものは見えないです。 IE6が非対応なものはなるべく設定しない方がよいでしょう
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
境界線を描く対象はTD要素とは限らないんです。 <style type="text/css"> <!-- TABLE { border-collapse: collapse;} TR,COL {border: solid black 2px;} #nanashi { border-right: solid pink 1px;} #shozoku { border-left: solid pink 1px;} --> </style> </head> <body> <table> <col id="num"> <col id="nanashi"> <col id="shozoku"> <tr> <td>1 <td>なんのだれべえ <td>クラブイケメン </tr> <tr> <td>2 <td>ほげらブサ吉 <td>妖怪屋敷 </tr> </table>
お礼
確かにこの方法が一番素直なんですが、IEではダメなんですよ。標準モードでも互換モードでも。Firefox、Safari、Chrome、Operaはうまくいくんですけどね。
一部訂正です td { padding:4px 0 0 4px; }
お礼
書いていただいたサンプルはうまく表示されなかったのですが、背景画像を使うという発想でやってみたらうまくいきました。 ありがとうございました。
bakcground-imageでも良ければこんな感じでできます。 汎用性という点ではcolの一つにclassをあたえなければなりませんが、あとは特に問題ないと思います。 4pxborder.gif ・・・4pxの正方形 2pxborder.gif ・・・2pxの正方形 <html> <body> <script type="text/javascript"> </script> <style type="text/css"> table { border-spacing:0px; border-collapse:collapse; background:url(4pxborder.gif) repeat-x 100 0; display:table-cell; } tbody { display:table-cell; padding:0 4px 4px 0; background:url(4pxborder.gif) repeat-x 0 100; } tr { background:url(4pxborder.gif) repeat-x 0 0; } td { padding:4px 0 0 4px; color:red; background:url(4pxborder.gif) repeat-y 0 0; } col { background:url(4pxborder.gif) repeat-y 0 0; } dolgroup col.common { background:url(2pxborder.gif) repeat-y 1px 0; } </style> </head> <body> <table> <col> <colgroup> <col> <col class="common"> </colgroup> <tbody> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> </tbody> </table> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
まぁ考えてみればわかりますが、 線が引かれているのはtdタグに対してで、tdはcolに含まれる要素じゃ ないですから無理でしょう。 必要に応じてtdに対してclassを設定して、cssで処理するのが妥当です
お礼
背景色はcolへの設定が活きたので高をくくっていたのですが・・・
お礼
2列目の<td>タグ150個に全部 class="hosoi" を指定するというのは私的にはスマートじゃないです(笑)。 「この縦罫線は細い」を表す記述は1箇所であって欲しいところです。 で、#3のお礼に書いたとおり背景画像を使う方法でいこうと思ったのですが、そうは問屋が卸してくれませんでした。 今、新たな質問を書いています。では、後ほど。