CSSで次のような装飾をするにはどうすればいいでしょうか?

http://d.hatena.ne.jp/iiiiiiiii/20051225
これのHTMLも上記ページに記載しています。

これはテーブルの入れ子で作っています。
これを、1つのテーブルとCSSだけで実装したいと考えています。divの入れ子にすると結局テーブルの入れ子と変わらないような気がするので、プレーンなテーブルにCSSのみでできないかお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/12/25 21:51:07
  • 終了:--

回答(3件)

id:ito-yu No.1

ito-yu回答回数323ベストアンサー獲得回数142005/12/25 22:13:41

ポイント20pt

border-style: double; はどうでしょう


<style type=”text/css”><!--

table{ border: black 3px double; border-collapse: collapse; }

td{ margin: 0; border: black 1px solid; }

--></style>

<table>

<tr>

<td>aaaaa</td>

<td>aaaaa</td>

<td>aaaaa</td>

</tr>

<tr>

<td>aaaaa</td>

<td>aaaaa</td>

<td>aaaaa</td>

</tr>

<tr>

<td>aaaaa</td>

<td>aaaaa</td>

<td>aaaaa</td>

</tr>

</table>

id:iiiiiiiii

結構近いです。

2005/12/26 10:26:14
id:ginpei No.2

ginpei回答回数40ベストアンサー獲得回数02005/12/26 00:51:55

ポイント40pt

こんな感じでいかがでしょう。

(マークアップの妥当性は無視しています、気になるなら適当に修正して下さい。)


<style>

table#double_lined_table {

width: 200px;

border: double #000 4px;

}

table#double_lined_table tr td {

border: solid #000 1px;

}


/* セルの境界を細くしたい場合 */

table#double_lined_table2 {

width: 200px;

border: double #000 4px;

}

table#double_lined_table2 tr td {

border-top: solid #000 1px;

border-left: solid #000 1px;

}

table#double_lined_table2 tr td.right_cell {

border-right: solid #000 1px;

}

table#double_lined_table2 tr.bottom_cells td {

border-bottom: solid #000 1px;

}

</style>


<table id=”double_lined_table” CellSpacing=”0”>

<tr>

<td>00</td>

<td>01</td>

<td>02</td>

</tr>

<tr>

<td>10</td>

<td>11</td>

<td>12</td>

</tr>

<tr>

<td>20</td>

<td>21</td>

<td>22</td>

</tr>

</table>


<table id=”double_lined_table2” CellSpacing=”0”>

<tr>

<td>00</td>

<td>01</td>

<td class=”right_cell”>02</td>

</tr>

<tr>

<td>10</td>

<td>11</td>

<td class=”right_cell”>12</td>

</tr>

<tr class=”bottom_cells”>

<td>20</td>

<td>21</td>

<td class=”right_cell”>22</td>

</tr>

</table>

id:iiiiiiiii

エクセレント!

2005/12/26 10:31:12
id:chankaz No.3

chankaz回答回数53ベストアンサー獲得回数32005/12/26 04:09:42

ポイント20pt

「1つのテーブル」だけでは外枠の太い線が出なかったので、「テーブルをネストしない」ということを優先させて、1番外にdiv要素を1個だけ追加してみました。


-----

(HTML)

<div class="sample">

<table>

<tr>

<td>あああああ</td>

<td>あああああ</td>

<td>あああああ</td>

</tr>

<tr>

<td>あああああ</td>

<td>あああああ</td>

<td>あああああ</td>

</tr>

<tr>

<td>あああああ</td>

<td>あああああ</td>

<td>あああああ</td>

</tr>

</table>

</div>


-----

(CSS)

*{

margin : 0;

padding : 0;

}

.sample{

width : 200px;

border : 3px solid #333;

}

.sample table{

width : 100%;

margin : 4px;

padding : 4px;

border : 2px solid #333;

border-collapse : collapse;

}

.sample td{

border : 1px solid #333;

}

-----


蛇足ですが、

このテーブルが「表ではない(=単なるテーブルレイアウト目的に使用する)」のなら、きちんと別の要素に置き換えて、その要素に対してスタイル付けしてゆくことをおすすめします。

id:iiiiiiiii

FireFoxでは少しずれてしまってました。でもとてもいい感じです。

2005/12/26 10:34:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません