テーブルの装飾

質問

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

回答No.1

yambejp · ベストアンサー

こんな感じで

<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>

お礼

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

補足

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

回答No.2

yambejp

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

<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>

お礼

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