CSSでTRに枠線とTDに背景を指定したい。

解決済

質問者：noppi_99
質問日時：2006/12/05 14:35
回答数：3件

CSSでTRに枠線種を指定、TDで背景色を指定したいのですが、
Firefoxでは思惑通り表示されますが、IEではTRの枠線が表示されません。
何か良い対応策は無いでしょうか？

== CSS ==
TABLE {
border-collapse: collapse;
}

.grid {
border: solid 1px;
border-color: #888;
}

.nogrid {
border: none;
}

.title {
background-color: #ff7;
}

.data1 {
background-color: #eef;
}

.data2 {
background-color: #fff;
}

== HTML ==

<table>
<tr class="grid">
<td class="title">項目１</td>
<td class="title">項目２</td>
<td class="title">項目３</td>
</tr>
<tr class="nogrid">
<td class="data1">値１</td>
<td class="data1">値２</td>
<td class="data1">値３</td>
</tr>
<tr class="nogrid">
<td class="data2">値１</td>
<td class="data2">値２</td>
<td class="data2">値３</td>
</tr>
</table>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： nachi_t
回答日時：2006/12/06 08:02

「<tr class="grid">～</tr>」に挟まれた「<td class="title">～</td>」に枠線を表示したい…という意味ですよね？

.grid {
border: solid 1px;
border-color: #888;
}

の部分を

.grid td {
border: solid 1px;
border-color: #888;
}

にすると可能です。(他にも書き方はありますが)
また、この場合は

.nogrid {
border: none;
}

は必要ありませんので、「<tr class="nogrid">」の部分を「<tr>」にして構いません。

また、「<tr class="grid">～</tr>」に挟まれた「<td class="title">～</td>」に枠線と背景色を同時に指定したい場合は、

.grid {
border: solid 1px;
border-color: #888;
}

の部分を

.grid td {
border: solid 1px;
border-color: #888;
background-color: #ff7;
}

のようにすると可能です。
この場合は

.nogrid {
border: none;
}

.title {
background-color: #ff7;
}

は必要ありませんので、「<tr class="nogrid">」の部分を「<tr>」に、「<td class="title">」の部分を「<td>」にして構いません。

Firefoxは使っていないので、これらがFirefoxでも正常に表示されるかは分かりませんが…。

この回答への補足

回答を頂きましてありがとうございます。
> <tr class="grid">～</tr>」に挟まれた「<td class="title">～</td>」に枠線を表示したい…という意味ですよね？
ではなく、TRには線を表示し、TDには線を表示したくないのです。
伝わりにくい質問で申し訳無いです。

御回答頂いた方法ですと、TDにも枠線が表示されます。
+--------+--------+--------+
| 項目１ | 項目２ | 項目３ |
+--------+--------+--------+

以下のようにTRのみに線を表示し、TDには線を表示したくないのです。
+--------------------------+
| 項目１項目２項目３ |
+--------------------------+

よろしくお願いします。

補足日時：2006/12/06 11:12

通報する

- 0
- 件

通報する

No.2

回答者： key-child
回答日時：2006/12/06 23:38

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="ja">

<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>テーブルの横線のみ表示</title>

<meta http-equiv="content-style-type" content="text/css;charset=shift_jis">
<style type="text/css">

</style>
</head>

<body>

<table rules="rows">
<tr>
<th>項目１</td>
<th>項目２</td>
<th>項目３</td>
</tr>
<tr>
<td id="a1">値１</td>
<td id="a2">値２</td>
<td id="a3">値３</td>
</tr>
<tr>
<td id="b1">値１</td>
<td id="b2">値２</td>
<td id="b3">値３</td>
</tr>
</table>

</body>

</html>

- 0
- 件

通報する

この回答へのお礼

ご回答いただきありがとうございます。
テーブル自体にはアウトラインを出したくないのです。
申し訳ないです。

通報する

お礼日時：2006/12/07 11:10

No.3ベストアンサー

回答者： crepon133
回答日時：2006/12/07 01:11

table {

border-width:0px;
border-collapse: collapse;
}
tr {
height:auto;
}
.grid1 {
text-align:center;
border-width:1px 0px 0px 1px;
border-style:solid;
border-color:#888;
background-color: #ff7;
padding:5px;
}
.grid2 {
text-align:center;
border-width:1px 0px 0px 0px;
border-style:solid;
border-color:#888;
background-color: #ff7;
padding:5px;
}
.grid3 {
text-align:center;
border-width:1px 1px 0px 0px;
border-style:solid;
border-color:#888;
background-color: #ff7;
padding:5px;
}
.data1 {
text-align:center;
border-width:1px 0px 0px 0px;
border-style:solid;
border-color:#888;
background-color: #eef;
padding:5px;
}
.data2 {
text-align:center;
border-width:1px;
border-style:solid;
border-color:#fff;
background-color: #fff;
padding:5px;
}

<table>
<tr>
<td class="grid1">項目１</td>
<td class="grid2">項目２</td>
<td class="grid3">項目３</td>
</tr>
<tr>
<td class="data1">値１</td>
<td class="data1">値２</td>
<td class="data1">値３</td>
</tr>
<tr>
<td class="data2">値１</td>
<td class="data2">値２</td>
<td class="data2">値３</td>
</tr>
</table>