掲示板/スタイルシート質問板/過去ログ/一覧/ DIVで表が作りたいのですが、線が太くなります

0 名前： ママン ： 2006/03/10 03:51: ＴＤだと、簡単に作れますが、DIV要素で付きの表を作ると、中の枠が太くなります。
(元は1pxで、横のセルのボーダーが合わさると、2pxです。)

なぜこのようになるのかは、分かるんですが、解決が出来ません。

セルを、どんどん増やしていっても、中側のボーダー枠の太さが、合計で、2pxにならないようにする記述があれば教えてください。

(例)3(セル)*3(セル)
□□□
□□□
□□□


<DIV style="width:100px; height:100px;">

<DIV style="width:33px; height:33px; border:solid 1px black; float:left;"></DIV>
<DIV style="width:33px; height:33px; border:solid 1px black; float:left;"></DIV>
<DIV style="width:28px; height:28px; border:solid 1px black; float:left;"></DIV>
</DIV>
<DIV style="width:100px; height:100px; cler:both;">

<DIV style="width:33px; height:33px; border:solid 1px black; float:left;"></DIV>
<DIV style="width:33px; height:33px; border:solid 1px black; float:left;"></DIV>
<DIV style="width:28px; height:28px; border:solid 1px black; float:left;"></DIV>
</DIV>
<DIV style="width:100px; height:100px; cler:both;">

<DIV style="width:33px; height:33px; border:solid 1px black; float:left;"></DIV>
<DIV style="width:33px; height:33px; border:solid 1px black; float:left;"></DIV>
<DIV style="width:28px; height:28px; border:solid 1px black; float:left;"></DIV>
</DIV>

1 名前： taro ： 2006/03/10 03:51: <DIV style="width:33px; height:33px; border:solid 1px; border-right-style: none; black; float:left;"></DIV>
<DIV style="width:33px; height:33px; border:solid 1px; border-right-style: none; black; float:left;"></DIV>
<DIV style="width:33px; height:33px; border-right-style: none; black; float:left;"></DIV>

border-right-style: none;
で、右側の線だけ見えなくするとか…どうでしょうか？

どんなものを目指してるのかわかりませんので見当違いでしたらすみません。

2 名前： 通りすがり2 ： 2006/03/10 03:51: かなりテキトー。
border-width:上右下左;

<DIV class="a">
<DIV style="border-width:1px 1px 1px 1px;"></DIV>
<DIV style="border-width:1px 1px 1px 0;"></DIV>
<DIV style="border-width:1px 1px 1px 0;"></DIV>
<DIV style="border-width:0 1px 1px 1px;cler:both;"></DIV>
<DIV></DIV>
<DIV></DIV>
<DIV style="border-width:0 1px 1px 1px;cler:both;"></DIV>
<DIV></DIV>
<DIV></DIV>
</DIV>
<br style="cler:both;">
<DIV class="a" style="border:1px solid #0000ff;">
</DIV>

div.a {width:100px; height:100px;}
div.a div {width:32px; height:32px; float:left;
border:1px solid #0000ff; border-width:0 1px 1px 0;}

3 名前： Pid ： 2006/03/10 03:51: >>0
表であるならば table 要素としてマークアップすべきです。div 要素の羅列は避けた方が良いと思います。

それはともかく，各セルの width と height が固定ならば，{ position: absolute; } を使って border を重ねるように配置していく手もあるでしょう。