人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSで次のような装飾をするにはどうすればいいでしょうか?
http://d.hatena.ne.jp/iiiiiiiii/20051225
これのHTMLも上記ページに記載しています。

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

●質問者: iiiiiiiii
●カテゴリ:ウェブ制作
✍キーワード:CSS HTML
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ito-yu
●20ポイント

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>

◎質問者からの返答

結構近いです。


2 ● ginpei
●40ポイント

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

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


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

◎質問者からの返答

エクセレント!


3 ● chankaz
●20ポイント

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

}

-----


蛇足ですが、

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ