- ベストアンサー
セルを透明に・・・
以下のような表があります。 <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）
- 専門家の回答
質問者が選んだベストアンサー
No.3,No.5,No6のmousegokeです。 border-width:thin; を border-width:1px; に変えてみてください。
その他の回答 (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で塗りつぶされてしまうだけですけど…
関連するQ&A
- 【CSS】表に線を入れる
<TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#999999"> <TBODY> <TR> <TD bgcolor="#ffffff"></TD> <TD bgcolor="#ffffff"></TD> </TR> <TR> <TD bgcolor="#ffffff"></TD> <TD bgcolor="#ffffff"></TD> </TR> </TBODY> </TABLE> これと同じ事をスタイルシートで表現したいのですが、どのようにしたら良いでしょうか? いろいろと試したのですが、外側だけ線が引かれたり中だけ引かれたりと、うまく出来ません。
- ベストアンサー
- HTML
- このフレームを直してもらいたいのですが
わかりにくいかとは思いますが、 下のようなフレームを作っています。 ―――――――――――――――――― ｜ | ｜ | ここがない→ ｜_＿＿＿＿＿＿＿ |＿＿＿＿＿＿＿＿＿＿ ｜ | ｜ | ｜＿＿＿＿＿＿＿__＿＿＿＿＿＿＿＿＿＿| まず「田」のテーブルを作って、下段を結合して一つにすると、 以上のようになってしまいます。なぜでしょうか？ ソースを書いておきますので、直してもらえませんでしょうか。 -------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P> <TABLE cellSpacing=0 cellPadding=0 bgColor=#000000 border=0> <TBODY> <TR> <TD bgColor=#000000> <TABLE cellSpacing=1 cellPadding=7 border=0> <TBODY> <TR> <TD bgColor=#ffffff colSpan=5> <P>aaaaa</P></TD> <TD bgColor=#ffffff>ここが消える→</TD></TR> <TR> <TD bgColor=#ffffff colSpan=6> <P>aaaaa</P></TD></TR></TBODY></TABLE> </TD></TR></TR></TBODY></TABLE></P> </BODY> </HTML>
- ベストアンサー
- HTML
- colspan セルの結合について
テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>
- 締切済み
- HTML
- CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- ベストアンサー
- HTML
- テーブルサイズ指定
こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という２つのテーブルで、 ２つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- テーブルの作り方をご教示ください
図のようなテーブルを作りたいのですがどうすればいいのかわかりません。 図はエクセルで書きました。 ----------------------------------------------- <table border=0 cellspacing=0 cellpadding=0> <tr> <td> <table border=0 bgcolor="#000000" cellspacing=1 cellpadding=1 width="230"> <tr bgcolor="#FFFFFF"> <td> １ </td> </tr> <tr bgcolor="#FFFFFF"> <td> ２ </td> <tr bgcolor="#FFFFFF"> <td> ３ </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。
- ベストアンサー
- HTML
- お世話になります。htmlの質問です。
ただいまテーブル設置のことで悩んでます 更新履歴とTOP絵のテーブルがつながってしまうのです 別々にわけたいのですがいじればいじるほどサイトがめちゃくちゃになります。 自分の今のタグです。 <table width="300" border="0" align="right" cellpadding="1" cellspacing="0" bgcolor="black"> <tr><td> <table border="0" cellspacing="0" cellpadding="6" bgcolor="#FFFFFF" width="300"> <tr><td COLSPAN="6"><FONT COLOR="black"> <IMG src="img/top絵.png" border="0" align="left"> <TABLE width="100" border="0" align="right" cellpadding="1" cellspacing="0" bgcolor="#FFFFFF"> <TR> <TD BGCOLOR="black"> <FONT COLOR="white"><SMALL><B>◆更新履歴。</B></FONT> </TD> </TR> <TD> <style><!--textarea,input{ background-color:#FFFFFF; filter:Alpha(opacity='70'); font-size:x-small; }--></style> どうすればいいようになるんでしょうか？ <textarea rows="5" cols="85"> サイト開設しました。
- 締切済み
- その他([技術者向] コンピューター)
- テーブル内のテーブルの高さを揃えたい。
CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?
- ベストアンサー
- HTML
- Mac IEのバグなのでしょうか？
TMEspionです。 <table border="0" cellpadding="5" cellspacing="5"><tr><td width="100" align="left" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="center" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="right" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td></tr><tr><td align="left" bgcolor="#999999">左</td><td align="center" bgcolor="#999999">中</td><td align="right" bgcolor="#999999">右</td></tr></table> --------------------------------- 上記のソースの様に、テーブルを縦2段、横2列にセルを作り、上段はテーブルタグ、下段はテキストでそれぞれalign属性をleft、center,rightと設定しています。 ところがInternet Explorer 5.2 for Macで見ると、 上段右のテーブルタグは「align="right"」の効果が出ていません。 この質問を呼んでいる回答者様には、ブラウザでどう表示されるんでしょうか？ どう表示されたかという結果とブラウザ名を教えて下さい。
- ベストアンサー
- HTML
- テーブルにオンマウスで文字色を変える方法を教えてください。
当方HPビルダーV9でHP作成中です。 最近やっとCSSなど使えるようになってきたので、様々試しているのですが、どうしても自力で実現できないため、知恵を貸してください<(_ _)> テーブル内に表示されている文字を、文字ではなくて周囲のテーブルにオンマウスで文字色を変更したいのですが、どのようなタグを組めばいいのでしょうか？ 該当部分には、上記の他に、テーブルにオンマウスでテーブルの背景色を変えるタグも組み込んでいます。 以下該当部タグです。 <TABLE style="filter:Alpha(opacity=40)"bgcolor="#f75563" width="100" height="100" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD align="center"onmouseover="this.style.backgroundColor='#ffffff'"onmouseout="this.style.backgroundColor='f75563'"><FONT color="#ffffff" size="-1">bulletin board</FONT></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- ホームページ作成ソフト
お礼
ありがとうございました。 ばっちり出来ました。 何度も何度もすみませんでした<(_ _)>