前回、「テーブルのCSSの書き方がわからない ー誰か教えて4」
でスタイルシートを使ってテーブルをうまく作ることができなかったのでみなさんにアドバイスをもらったので実際にやってみました。
ゑこびすさん、山の爺さま、みさーりぬさんありがとうございます。m(_ _)m
さて、最初に試してみたのは
<table cellspacing="0" >
を入れてみました。
すると、こんな感じになってしまいました。
| 10月ネット収入 | |||
| 10/10 | Yahoo!リサーチ | 現金 | 260円 |
| 合計 260円 | |||
次にborder-spacingを使って、
<table border-spacing="0">
| 10月ネット収入 | |||
| 10/10 | Yahoo!リサーチ | 現金 | 260円 |
| 合計 260円 | |||
としましたが、変化がなかったです。
その次にゑこびすさんが挑戦した方法でやってみたらいい感じだったんです。
これをtableタグとスタイルシートに分けてこんな感じにしてみました。
tableタグ
スタイルシート
th { background-color:#73D7AD; color:#FFFFFF;}
td { background-color:#FFFFFF; color:#525552;}
こうすると透明太枠がなくなり、ただの線の枠組みのテーブルになります。
あとは、テーブルの高さとか微調整すれば良い状況だったんです。
そして、翌日。
前回の記事でも書いた通りスタイルシートはtableで指定するのではなくdiv指定をしたかったので、ゑこびすさんが作ってくれたのと自分のタグをにらめっこしてたんです。
そうしたら・・・。
何かが足りないことに気づいてしまったんです。(^^;)
いや〜な予感がしながらもその作業をしてみたらあっさり解決してしまったんです。(^^;;;)
非情に言いづらいのですが・・・。
tableを追加しただけで透明太枠が消失したんですよ。（苦笑）
はじめこうだったスタイルシートを
#net-income{
text-align: center; /* 配置 */
font-weight: normal; /* フォントの太さ */
font-size: 13px; /* フォントサイズ */
color:#555555;/* フォントの色 */
background-color: #ffffff; /* 背景の色 */
border:1px solid #669999;/* テーブルの枠線 */
width: 400px; /* 全体の幅 */
border-collapse:collapse;
margin-top:3ex;
margin-bottom:0px;
}
/* テーブル内のスタイル */
#net-income td {
text-align: center;/* 配置 */
font-size: 13px;/* フォントサイズ */
border:1px solid #669999;/* テーブルの枠線 */
}
tableを追加して最終的にはこうしました。
#net-income table{
text-align: center; /* 配置 */
font-weight: normal; /* フォントの太さ */
font-size: 13px; /* フォントサイズ */
color:#555555;/* フォントの色 */
background-color: #ffffff; /* 背景の色 */
border:1px solid #669999;/* テーブルの枠線 */
width: 400px; /* 全体の幅 */
border-collapse:collapse;
margin-top:3ex;
margin-bottom:0px;
}
/* テーブル内のスタイル */
#net-income td {
text-align: center;/* 配置 */
font-size: 13px;/* フォントサイズ */
border:1px solid #669999;/* テーブルの枠線 */
}
tableタグの上位にdivタグを付けて、更にスタイルシートで指定をしようなんて高度なことをしようとするからこんなミスをしてしまうんですよね。
でも、みなさんのアドバイスのおかげで気づくことができたので感謝、感謝です。(^^)
というわけで、最終的にはこうなりました。
tableタグ
<div id="net-income">
<table cellpadding="5" summary="net-income" ><tbody>
<tr>
<td style="background:#73d7aa;color:#ffffff;height:35px"
colspan="4">10月ネット収入</td>
</tr>
<tr>
<td style="width:50px">10/10</td>
<td style="width:150px"><a target="_blank" href="http:
//research.yahoo.co.jp/">Yahoo!リサーチ</a></td>
<td style="width:100px">現金</td>
<td style="width:100px">260円</td>
</tr>
<tr>
<td style="background:#73d7aa;color:#ffffff;text-align:right" colspan="4">合計 260円</td>
</tr>
</tbody></table>
</div>
<!--＊ ネット収入表終わり ＊-->
スタイルシート
#net-income table{
text-align: center; /* 配置 */
font-weight: normal; /* フォントの太さ */
font-size: 13px; /* フォントサイズ */
color:#555555;/* フォントの色 */
background-color: #ffffff; /* 背景の色 */
border:1px solid #669999;/* テーブルの枠線 */
width: 400px; /* 全体の幅 */
border-collapse:collapse;
margin-top:3ex;
margin-bottom:0px;
}
/* テーブル内のスタイル */
#net-income td {
text-align: center;/* 配置 */
font-size: 13px;/* フォントサイズ */
border:1px solid #669999;/* テーブルの枠線 */
}
さて、今度はこれを使ってリンク集でも作ろうと思います。
またできあがったら記事書きますね。
+++ 関連記事 +++
|
