CSSでテーブルボーダーを一発指定出来ません！

質問

現在テーブルに対してのCSSを設定しているのですが、私の勘違いなのかうまく出来ません・・・。

例えば縦5×横5列の表が有ったとします。

そこにCSSで四方1pxのボーダーを指定します。

でも、これだけだと表の一番外枠部分にしかボーダーが表示されません・・・。（当然なのかもしれませんが）

そこで、CSSを使い中のブロック？部分、<td>全てにボーダーを表示させたいのですが、そのようなことは可能なのでしょうか？

ようは、表の枠線全てをcssで表示させたいのですが、この様な事は可能でしょうか？？

ご存知の方がいましたら、アドバイスいただけますでしょうか？

宜しくお願いいたします。

回答No.4

goldfox · ベストアンサー

＞tableに定義してあります、<table cellspacing="0" cellpadding="5">って、こちらもcssで指定することは可能なのでしょうか？？

どちらも可能です。
cellpaddingは要するに、セル内の余白指定ですから、
th,td {
border: 1px solid #0000ff;
border-width:0 1px 1px 0; /* 下と右1px */
padding:5px 5px 0 10px;
}
とでもすればセル枠と内容の間に余白ができます。
枠線の指定と同じように上下左右で違う値を指定できます。

cellspacingのほうは、
border-collapseの値を separateにし、
border-spacingで、上下左右の幅を指定できます。
table {
border: 1px solid #ff0000;
border-width:1px 0 0 1px ; /* 上と左1px */
border-collapse: separate;
border-spacing:10px;
}
ただし、こちらはIEでは反映されません。

参考URL：

http://www.htmq.com/style/border-spacing.shtml

お礼

お礼が遅れて申し訳ありません。

大変参考になるアドバイス感謝いたします。
有難う御座いました。

回答No.3

goldfox

ではもう一つ。

table {
border: 0px solid #ff0000;
border-width:1px 0 0 1px ; /* 上と左1px */
}
th,td {
border: 1px solid #0000ff;
border-width:0 1px 1px 0; /* 下と右1px */
}

<table cellspacing="0" cellpadding="5">
<tr>
<td>あああ</td>
<td>いいい</td>
<td>ううう</td>
</tr>
<tr>
<td>えええ</td>
<td>おおお</td>
<td>かかか</td>
</tr>
</table>

お礼

有難う御座います。

こちらもまた独特の方法ですね・・・。

一番シンプルなのでしょうか？
非常に参考になります！！

すみません、趣旨から話が変わるのですが、tableに定義してあります、<table cellspacing="0" cellpadding="5">って、こちらもcssで指定することは可能なのでしょうか？？

質問ばかりですみません・・・非常に気になるので、もぢ指定が可能であれば方法を教えていただけないでしょうか？

何度もすみませんが、宜しくお願いいたします。

回答No.2

BLUEPIXY

<style>
<!--
table {
border-color: black;
}
th.lu, td.lu { /* 全般のセル：左と上 */
border-style: solid;
border-width: 1px 0px 0px 1px; /* 上 右 下 左 */
}
th.r,td.r { /* 右端のセル：左と上と右 */
border-style: solid;
border-width: 1px 1px 0px 1px; /* 上 右 下 左 */
}
td.b { /* 底のセル：左 上 下 */
border-style: solid;
border-width: 1px 0px 1px 1px; /* 上 右 下 左 */
}
td.br { /* 底の右端セル：全部 */
border-style: solid;
border-width: 1px;
}

-->
</style>
…
<table cellspacing="0">
<tr>
<th class="lu">&nbsp;</th>
<th class="lu">&nbsp;</th>
<th class="lu">&nbsp;</th>
<th class="lu">&nbsp;</th>
<th class="r">&nbsp;</th>
</tr>
<tr>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="r">&nbsp;</td>
</tr>
<tr>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="r">&nbsp;</td>
</tr>
<tr>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="lu">&nbsp;</td>
<td class="r">&nbsp;</td>
</tr>
<tr>
<td class="b">&nbsp;</td>
<td class="b">&nbsp;</td>
<td class="b">&nbsp;</td>
<td class="b">&nbsp;</td>
<td class="br">&nbsp;</td>
</tr>
</table>

お礼

有難う御座います。

色々な方法があるのですね・・・。
これは基本的に結果オーライというか、出来ればいいのですよね？

大変参考になりました。

回答No.1

crepon133

table {
border: 0px solid #ff0000;
border-collapse: collapse;
}

tr {
height: auto;
}

td {
border: 1px solid #0000ff;
}

<table>
<tr>
<td>あああ</td>
<td>いいい</td>
<td>ううう</td>
</tr>
<tr>
<td>えええ</td>
<td>おおお</td>
<td>あああ</td>
</tr>
</table>

お礼

有難う御座います。

早速試してみます！！