以下のような表があります。
<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)"をいろいろなところに当てはめてみたのですが、うまく出来ませんでした。
何か方法はありますか?よろしくお願いします。
No.7
- 回答日時:
質問の趣旨が、『セルを透明にする』事ではなくて、『テーブルの罫線を望
む色と形状にしたい』と理解しました。
※注意:字下げの為、全角の空白を使用
<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)で幅1pxの実線(solid)が罫線として描画
されます。
実線以外にも、以下のものがあります。
inset, outset, groove, ridge, dashed, dotted, double
この方法だと、上下左右の罫線を個別に設定することも出来て、とても便利
です。
※私が動作確認したブラウザ
IE 5以上
Opera 7.x
これで役に立ちますか?
No.6
- 回答日時:
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ピクセル程度の罫線です)
No.5
- 回答日時:
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"を指定しているためだと思います。
この回答への補足
返答ありがとうございます。
なぜか太い罫線になるのですが…
しかも、大枠の中にセル枠が出来てます…(画像をアップできないのが残念です)
細い罫線の状態でセルのバックを抜きたいのですが…
よろしくお願いします。
No.3
- 回答日時:
ヘッドタグの最後に
<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で埋まるだけ)
他に方法がありますか?
No.2
- 回答日時:
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
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS line-height が効かない
-
HTMLでテーブルを縦に並べたい!
-
テーブルの中のグラデーション...
-
Firefox2で縦方向に隙間が出来...
-
table内で画像と文字をセンター...
-
Excelで可視部分だけをWeb形式...
-
htmlでテーブル内にテキストボ...
-
エクセルでサイズに合ったもの...
-
Excel で等間隔で縦線を引きた...
-
<tbody>は何のためにあるんでし...
-
【エクセルVBA】シェイプのサイ...
-
インラインフレームの表示位置...
-
CSSのtransform: translate(-50...
-
markdownでテーブルの罫線は、...
-
エクセルでサイズ指定でPOP...
-
【ホームページビルダー】表の...
-
HTMLでブラウザを終了させる方法
-
window.openした時、親ウィンド...
-
PDFへてのテキストボックスにて...
-
エクセルの行の幅がずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
table内で画像と文字をセンター...
-
<td> 内のテーブルを上寄せにす...
-
HTMLでテーブルを縦に並べたい!
-
表の中に表
-
テーブルで3セル作った行の下に...
-
Excelで可視部分だけをWeb形式...
-
スタイルシートで<table>の内側...
-
Jimdoで表組のなかの画像をポッ...
-
テーブルとテーブルの間に、隙...
-
WebにてExcelを生成してダウン...
-
<TABLE><TD><TR>~内のアンカー
-
DWでのメールフォーム作成
-
表の中でのフォーム
-
プリントアウト時、ページ内容...
-
CSS line-height が効かない
-
htmlのセル幅固定の仕方
-
valign="top" が効かない
-
cssのfont-sizeがFirefoxで効か...
-
width="150" に収まるように・...
-
ドリームウェーバー(ウィーバ...
おすすめ情報