- ベストアンサー
スタイルシートで罫線をもっと細くしたい
IE6.0です、 テーブルの罫線をもっと細くしたいのですが、 border-widthは1pxが一番細いのでしょうか？ この教えてgooくらい細くしたいのですが 他にやり方があれば教えてください。 TABLE { border-color: #8b4513; padding: 1px 1px 1px 1px; margin: 1px 1px 1px 1px; border-style: solid; border-width: 1px 1px 1px 1px; } 宜しくお願いします、
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
要は教えてgooと同じようなデザインをcssで実現したいのですよね。 THとTDのborder-styleをnoneに変更、TABLEにborder-collapse: collapse;を追加。 これで近くなるのでは。 TABLE { margin: 0px; border: 1px solid #8b4513; border-collapse: collapse; } TH { background-color: #ffa500; font-size: x-small; color: black; font-family:Times New Roman; padding: 0px; border-style: none; } TD { height: 20px; font-size: x-small; color: black; font-family:Times New Roman; padding: 0px; border-style: none; }
その他の回答 (3)
- beach_walker
- ベストアンサー率40% (2/5)
No.3の方の回答にほぼ賛成ですが、 thとtdのborder-styleはnoneにせず、solidのままで良いかと思います。
お礼
ご回答有難うございます。 No3の方のアドバイスとあわせてできました。 勉強になりました。 どうも有難うございました。
- mrumesuke
- ベストアンサー率45% (254/557)
1pxが限界じゃないでしょうか。 mole_moleさんの作るページよりも教えてgooの方が細く見えるとすれば、原因は背景色と罫線の色の関係にあるのかもしれません。 教えてgooでは、白と云う高輝度な背景色に、同じく高輝度なブルーやオレンジを使用しています。 もしもmole_moleさんのページの背景色が同じように明るい色だとすると、#8b4513と云う色は暗くて目立ちすぎてしまうのではないでしょうか。 なお教えてgooでは、スタイルシートを使わずにテーブルの入れ子によって罫線を細く見せています。 サンプルソースを貼りますので比較してみてください。 <body bgcolor="#fafafa"> <table width=300 style="border-color:#8b4513; padding:1px; margin:1px; border-style:solid; border-width: 1px;"> <tr><td align=center>スタイルシート<br>#8b4513</td></tr> </table> <br> <table width=300 style="border-color:#cc9933; padding:1px; margin:1px; border-style:solid; border-width: 1px;"> <tr><td align=center>スタイルシート<br>#cc9933</td></tr> </table> <br> <table width=300 style="border-color:#B9C9FF; padding:1px; margin:1px; border-style:solid; border-width: 1px;"> <tr><td align=center>スタイルシート<br>#B9C9FF</td></tr> </table> <br> <table width=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#8b4513> <tr><td> <table width=300 border=0 cellspacing=1 cellpadding=1 bgcolor="#fafafa"> <tr><td align=center>入れ子テーブル<br>#8b4513</td></tr> </table> </td></tr> </table> <br> <table width=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#cc9933> <tr><td> <table width=300 border=0 cellspacing=1 cellpadding=1 bgcolor="#fafafa"> <tr><td align=center>入れ子テーブル<br>#cc9933</td></tr> </table> </td></tr> </table> <br> <table width=300 border=0 cellspacing=0 cellpadding=1 bgcolor=#B9C9FF> <tr><td> <table width=300 border=0 cellspacing=1 cellpadding=1 bgcolor="#fafafa"> <tr><td align=center>入れ子テーブル<br>#B9C9FF</td></tr> </table> </td></tr> </table> </body>
お礼
ご回答有難うございます。 サンプルまで作っていただいて有難うございます。 これで見てみると、「色」の問題ではなく、何か根本的なミスがあるような気がしてきました。 太さは「見間違い」レベルではなく、はっきりとこの線を三本くらい重ねたくらいの太さです。 今現在テーブルに指定しているスタイルシートは以下の通りです。 TABLE { border-color: #8b4513; padding: 1px 1px 1px 1px; margin: 0px 0px 0px 0px; border-style: solid; border-width: 1px 1px 1px 1px; } TH { background-color: #ffa500; font-size: x-small; color: black; font-family:Times New Roman; padding: 1px 1px 1px 1px; margin: 0px 0px 0px 0px; border-style: solid; border-width: 1px 1px 1px 1px; } TD { height: 20px; font-size: x-small; color: black; font-family:Times New Roman; padding: 1px 1px 1px 1px; margin: 0px 0px 0px 0px; border-style: solid; border-width: 1px 1px 1px 1px; } このうちの、THとTDの部分をコメントアウトすると、テーブルのまわりだけがサンプルと同じ線になります。 ですが、中のTHやTD部分の罫線がmarginのままで表示されてしまうのです。 何かお気づきの点がありましたらご教示ください。
- xjd
- ベストアンサー率63% (1021/1612)
ただのHTMLですが、こんなのはダメですか? <body> <table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td> <table width="100" border="0" cellspacing="1" cellpadding="1"> <tr> <td bgcolor="#FFFFFF">Table Header</td> </tr> <tr> <td bgcolor="#FFFFFF">1dotの罫線</td> </tr> </table> </td> </tr> </table> </body>
お礼
ご回答有難うございます。 手入力だと全てのページを修正しなければならないので今回はスタイルシートでの質問としました。 言葉足らずですみませんでした。
お礼
No4の方のアドバイスとあわせて これでできました。 tableにborder-collapse: collapse;を指定しなきゃいけなかったんですね。 勉強になりました。 有難うございました。