テーブルの装飾

cssでテーブルに縦線のみ、つけたいのですが、うまくいきません。記述方法を教えてください。その他、テーブルのいろんな装飾バリエーションが紹介されているサイトを教えてください。

No.1 ベストアンサー 回答者： yambejp 回答日時： 2009/08/25 11:18

こんな感じで

<style>
#t1{
border-collapse:collapse;
}
#t1 td{
border-right:1px solid #000000;
border-left:1px solid #000000;
}
</style>
<table id="t1">
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>

この回答への補足

申し訳ありません。補足なのですが、この形で左右の端はborderなしというのはできるでしょうか？

補足日時：2009/08/25 15:02

この回答へのお礼

ありがとうございました。tdだけに左右borderなのですね。うまくいきました。

お礼日時：2009/08/25 14:26

No.2 回答者： yambejp 回答日時： 2009/08/25 18:30

ちょっと面倒ですが、こんな感じで・・・

<style>
#t1{
border-collapse:collapse;
}

#t1 td{
border-right:1px solid #000000;
border-left:1px solid #000000;
}

#t1 td:first-child,#t1 td.first-child{
border-left:0px solid;
}

#t1 td:last-child,#t1 td.last-child{
border-right:0px solid;
}

#t1 td{
behavior:expression(
this.className+=(this.previousSibling == null && !this.className.match(/first-child/))?" first-child":""
,this.className+=(this.nextSibling == null && !this.className.match(/last-child/))?" last-child":""
)
}

</style>
<table id="t1">
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>

この回答へのお礼

遅レスで申し訳ありません。参考になりました。ありがとうございます。

お礼日時：2009/09/23 12:53