- ベストアンサー
セルを透明に・・・
以下のような表があります。 <TABLE cellpadding="3" cellspacing="1" bgcolor="#666666"> <TBODY> <TR> <TD bgcolor="#ffffff">項目1</TD> <TD bgcolor="#ffffff">内容1</TD> </TR> <TR> <TD bgcolor="#ffffff">項目2</TD> <TD bgcolor="#ffffff">内容2</TD> </TR> <TR> <TD bgcolor="#ffffff">項目3</TD> <TD bgcolor="#ffffff">内容3</TD> </TR> </TBODY> </TABLE> この状態で、壁紙を設定すると表の中は白でつぶれてしまいますよね。 これを表の中にも背景が出るようにすることは可能ですか? style="filter:alpha(opacity=0)"をいろいろなところに当てはめてみたのですが、うまく出来ませんでした。 何か方法はありますか?よろしくお願いします。
- master-3rd
- お礼率39% (524/1325)
- HTML
- 回答数8
- ありがとう数2
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (7)
- Bo_Bo
- ベストアンサー率65% (97/149)
質問の趣旨が、『セルを透明にする』事ではなくて、『テーブルの罫線を望 む色と形状にしたい』と理解しました。 ※注意：字下げの為、全角の空白を使用 <style type="text/css"> <!-- table.flat { border-collapse: collapse; border: 1px solid #666666; } .flat th, .flat td { border-collapse: collapse; border: 1px solid #666666; } --> </style> ： ： <table class="flat" border="1"> <tbody> <tr> <td>項目1</td> <td>内容1</td> </tr> <tr> <td>項目2</td> <td>内容2</td> </tr> <tr> <td>項目3</td> <td>内容3</td> </tr> </tbody> </table> 上記の例では、灰色（#666666）で幅１pxの実線（solid）が罫線として描画 されます。 実線以外にも、以下のものがあります。 inset, outset, groove, ridge, dashed, dotted, double この方法だと、上下左右の罫線を個別に設定することも出来て、とても便利 です。 ※私が動作確認したブラウザ IE 5以上 Opera 7.x これで役に立ちますか？
お礼
ありがとうございました。 ばっちりなりました!
- mousengoke
- ベストアンサー率50% (197/388)
No.3,No.5のmousegokeです。 それではスタイルタグの部分を <STYLE type="text/css"> <!-- TABLE{ border-collapse:collapse; } TD,TH{ background-color:transparent; } TABLE,TD,TH{ border-style:solid; border-color:#666666; border-width:thin; } --> </STYLE> としてみてください。
補足
返答ありがとうございます。 おぉ! かなりイメージと近くなってきました。 しかし、やはり罫線はちょっと太めですね。 1ピクセル(なのかな?)での罫線と言うのは無理なのでしょうか? (現状では3ピクセル程度の罫線です)
- mousengoke
- ベストアンサー率50% (197/388)
No.3のmousegokeです。 もしかしたら#666666は罫線の色のつもりだったんですか? では <STYLE type="text/css"> <!-- TD,TH{ background-color:transparent; } table,td,th{ border-style:solid; border-color:#666666; --> </STYLE> </HEAD> <BODY background="./back02.jpg"> <TABLE cellpadding="3" cellspacing="1"> <TBODY> <TR> <TD>項目1</TD> <TD>内容1</TD> </TR> <TR> <TD>項目2</TD> <TD>内容2</TD> </TR> <TR> <TD>項目3</TD> <TD>内容3</TD> </TR> </TBODY> </TABLE> としてみてください。表に隙間が出来るのはcellspacing"1"を指定しているためだと思います。
補足
返答ありがとうございます。 なぜか太い罫線になるのですが… しかも、大枠の中にセル枠が出来てます…(画像をアップできないのが残念です) 細い罫線の状態でセルのバックを抜きたいのですが… よろしくお願いします。
bgcolor="#666666" をTABLEタグ内で指定せず、透明にしたくないセル単位(TR)で指定すれば良いっす。 #1でした。
補足
>bgcolor="#666666" をTABLEタグ内で指定せず そうすると罫線が表示されないと思うのですが? >透明にしたくないセル単位 全て透明にしたいのですが… 細い罫線のまま背景色を抜きたいのですが…
- mousengoke
- ベストアンサー率50% (197/388)
ヘッドタグの最後に <style type="text/css"> <!-- td,th{ background-color:transparent; } --> </style> を入れてみてください。 もし一部のセルだけ透過したいのなら そのセルを <td class="backtoumei"> のようにclass属性を指定して .backtoumei{ background-color:transparent; } にしてみてください。
補足
返答ありがとうございます。 -------------------------- </TITLE> <STYLE type="text/css"> <!-- TD,TH{ background-color:transparent; } --> </STYLE> </HEAD> <BODY background="./back02.jpg"> <TABLE cellpadding="3" cellspacing="1" bgcolor="#666666"> <TBODY> <TR> <TD bgcolor="#ffffff">項目1</TD> <TD bgcolor="#ffffff">内容1</TD> </TR> <TR> <TD bgcolor="#ffffff">項目2</TD> <TD bgcolor="#ffffff">内容2</TD> </TR> <TR> <TD bgcolor="#ffffff">項目3</TD> <TD bgcolor="#ffffff">内容3</TD> </TR> </TBODY> </TABLE> </BODY> -------------------------------- こういうことでしょうか? 残念ですが、だめでした。(やっぱり#666666で埋まるだけ) 他に方法がありますか?
- 78tch
- ベストアンサー率31% (50/157)
bgcolor="#666666" をやめて border=1 border=1 bordercolor="#666666" では？ ちょっと違うか・・・ ボーダーをやめて、#666666色の細い画像を交互に埋め込むとか。
補足
>border=1 border=1 bordercolor="#666666" では？ こうすると、太線になるんですよね。 >ボーダーをやめて、#666666色の細い画像を交互に いわゆる ----------------- <TABLE border="0" cellpadding="0"> <TBODY> <TR> <TD rowspan="7" bgcolor="#666666"></TD> <TD colspan="3" bgcolor="#666666"></TD> <TD rowspan="7" bgcolor="#666666"></TD> </TR> <TR> <TD>項目1</TD> <TD bgcolor="#666666"></TD> <TD>内容1</TD> </TR> <TR> <TD colspan="3" bgcolor="#666666"></TD> </TR> <TR> <TD>項目2</TD> <TD bgcolor="#666666"></TD> <TD>内容2</TD> </TR> <TR> <TD colspan="3" bgcolor="#666666"></TD> </TR> <TR> <TD>項目3</TD> <TD bgcolor="#666666"></TD> <TD>内容3</TD> </TR> <TR> <TD colspan="3" bgcolor="#666666"></TD> </TR> </TBODY> </TABLE> ------------------ こういうことでしょうか? ちょっと美しくないようなw
bgcolor="#ffffff" の指定を外せばOKっす。
補足
返答ありがとうございます。 >bgcolor="#ffffff" の指定を外せばOKっす。 それだけだと、実際やってもらえればすぐわかると思うのですが、単に#666666で塗りつぶされてしまうだけですけど…
お礼
ありがとうございました。 ばっちり出来ました。 何度も何度もすみませんでした<(_ _)>