こんにちは。
ずっと悩んでいるのですが、テーブルのボーダーって1ptよりも細くはならないのですか?
帳票を印刷するプログラムを作ったのですが、どうも線が太くて不恰好に思えます。
スタイルシートのリファレンスなどチェックしてみたのですが、
どこにもありませんでした。

そもそも不可能なのでしょうか?
ご存知の方、教えてください。よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ボーダーではどうしても幅が出てしまうので、こういうときは二重テーブルを使います。



<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD bgcolor="BLACK">
<TABLE border="0" cellpadding="2" cellspacing="1">
<TR bgcolor="WHITE">
<TD>あいうえお</TD>
<TD>かきくけこ</TD>
</TR>
<TR bgcolor="WHITE">
<TD>さしすせそ</TD>
<TD>たちつてと</TD>
</TR>
</TABLE>
</TD></TR></TABLE>

1つ目のテーブルを真っ黒の下地にし、その上にsellspacingが0でないテーブルを乗せます。
この時、2つ目のテーブルのバックを白にするために、TRタグのbgcolorを指定します。これをTABLEタグのbgcolorに設定すると、折角の下地が台無しになります。
1つ目のTABLEと2つ目のTABLEのcellpaddingとcellspacingの値をいろいろいじって、目的に合った表を作ってください。
    • good
    • 0
この回答へのお礼

すごい!できました。
こんな方法あったんですね。
目から鱗です。本当にありがとうございました。

お礼日時:2001/11/07 17:47

 「1px」がコンピューターの物理的限界です。


 こっちを試してみてください。

 pt はポイント単位。
 px はピクセル単位です。
    • good
    • 0
この回答へのお礼

ありがとうございます。大変参考になりました。

お礼日時:2001/11/07 17:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qボーダースタイルがうまく表示できない

#content {
width:525px;
}
div.box {
width:525px;
margin-top: 20px;
border-bottom:dotted 1px #ccc;
}
div.left {
width:140px;
float: left;
font-weight: bold;
margin-left: 5px;
}
div.right {
width:380px;
float: left;
line-height: 20px;
height: 20px;
}
<div id="content">
<div class="box">
<div class="left">Address</div>
<div class="right">住所<br>東京都</div>
</div>
</div>

クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ?によりボーダーがトップになっているように見えてしまいます。
どこが間違っておりますか?
アドバイスを宜しくお願いします。

#content {
width:525px;
}
div.box {
width:525px;
margin-top: 20px;
border-bottom:dotted 1px #ccc;
}
div.left {
width:140px;
float: left;
font-weight: bold;
margin-left: 5px;
}
div.right {
width:380px;
float: left;
line-height: 20px;
height: 20px;
}
<div id="content">
<div class="box">
<div class="left">Address</div>
<div class="right">住所<br>東京都</div>
</div>
</div>

クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ?によりボーダ...続きを読む

Aベストアンサー

ブラウザにもよりますが、ズレではありません・・・
div.left と div.right を float しているのだから、
浮いた状態になっている。
その為、div.box が、div.left と div.rightを認識できないのでテキストで認識出来る範囲しか囲む事は出来ない。

borderだけではなく、背景なども同じく表示出来ないはず・・・
------------------------
div.box 内でクリアーする事。
(フロート時はクリアーをセットで使う事)

クリアーのテクニックは、多々ありますが、
表示差異も確認しながら色々試しましょう。

Qスタイルシートを使うとボーダー関連設定の挙動が変わる?

tableタグには、
bordercolordarkと、bordercolorlightがありますが、
スタイルシートには、border-colorしか指定出来ません。
tableタグでbordercolorを指定すると格子状に全体の枠線に反映されるのに対し、
スタイルシートでtableタグにクラス指定でborder-colorを記述しても、外枠しか反映されません。
この変の挙動の決まりがよく分からないのですが、
どなたかお詳しい方はいらっしゃいませんでしょうか?

ちなみに、今実現したいことは、
tableに立体感の無い枠線(影なし1色)を付け、各セルを区切る線も同色で書きたいのです。
外枠だけは少し太めにし、一番上の行は見出し行とし、枠線と同色で塗りつぶすので、その塗りつぶしたセルと枠線との間に溝が出来ないようにしたいのです。

また、文字数制限があるので、極力スタイルシートを利用して、同じコードを書かないようにしたいのです。

ややこしくて恐縮ですが、お知恵をお借りしたくお願い致します。

Aベストアンサー

HTMLのTABLE要素にはbordercolordarkなどの属性は存在しません。
いつものマイクロソフト方言でしょう。無視します。

CSSである要素に設定した枠線が、当該要素の外枠なのは当然です。
TABLE要素も例外ではありません。表の罫線を全体的に描くのでした
ら、TD要素の外枠を指定します。いずれも、border-styleで種類を
指定しますので、solidにしとけばベタになります。

というわけで、
TABLE {
   border-collapse: collapse;
   border-style: solid;
   border-color: aqua;
   border-width: 4px;
   }

THEAD {
   background-color: aqua;
   }

TD {
   border-style: solid;
   border-color: aqua;
   border-width: 2px;
   }

って感じのスタイルシートで、
<table>
<thead>
  <tr>
    <td>見出しその1</td>
    <td>見出しその2</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td>セル1</td>
    <td>セル要素2</td>
  </tr>
  <tr>
    <td>2行目のセル要素1</td>
    <td>2行目のセル要素その2</td>
  </tr>
</tbody>
</table>

これでオッケー。

HTMLのTABLE要素にはbordercolordarkなどの属性は存在しません。
いつものマイクロソフト方言でしょう。無視します。

CSSである要素に設定した枠線が、当該要素の外枠なのは当然です。
TABLE要素も例外ではありません。表の罫線を全体的に描くのでした
ら、TD要素の外枠を指定します。いずれも、border-styleで種類を
指定しますので、solidにしとけばベタになります。

というわけで、
TABLE {
   border-collapse: collapse;
   border-style: solid;
   border-color: aqua;
   ...続きを読む

Qスタイルシートの細ーい線

スタイルシートで細い線にするには、どうすれば
よいのでしょうか。
過去ログをいくつか参照させていただたいたのですが
(http://www.okweb.ne.jp/kotaeru.php3?q=325031 等)
これだと、となりあったセル同士だと互いの枠線が
重なって2本の線になってしまいます。
テーブルの入れ子以外で、いわゆる「一本線」で
スマートに表現する方法はないでしょうか。
以前見たことがあるのですが。

Aベストアンサー

左右の隣り合わせのテーブルとすると
左のテーブルの右線(ボーダー)は設定して
右のテーブルの左線は設定しなければ良いわけです。

例えば
縦2行、横2列の表では
<TABLE style="width : 300px;height : 100px;" cellspacing="0">
<TBODY>
<TR>
<TD style="border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-top-color : lime;border-right-color : lime;border-bottom-color : lime;border-left-color : lime;width : 100px;"> </TD>
<TD style="border-width : 1px 1px 1px 1px;border-style : solid solid solid none;border-color : aqua aqua aqua aqua;width : 200px;"> </TD>
</TR>
<TR>
<TD style="border-width : 1px 1px 1px 1px;border-style : none solid solid solid;border-color : fuchsia fuchsia fuchsia fuchsia;width : 100px;"> </TD>
<TD style="border-width : 1px 1px 1px 1px;border-style : none solid solid none;border-color : black black black black;width : 200px;"> </TD>
</TR>
</TBODY>
</TABLE>

こんな感じになると思います。
コピペしてご確認ください。

左右の隣り合わせのテーブルとすると
左のテーブルの右線(ボーダー)は設定して
右のテーブルの左線は設定しなければ良いわけです。

例えば
縦2行、横2列の表では
<TABLE style="width : 300px;height : 100px;" cellspacing="0">
<TBODY>
<TR>
<TD style="border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-top-color : lime;border-right-color : lime;border-bottom-color : lime;border-left-color : lime;width : 100px;"> </TD>
<TD style="...続きを読む

Qスタイルシートで罫線をもっと細くしたい

IE6.0です、

テーブルの罫線をもっと細くしたいのですが、
border-widthは1pxが一番細いのでしょうか?
この教えてgooくらい細くしたいのですが
他にやり方があれば教えてください。

TABLE {
border-color: #8b4513;
padding: 1px 1px 1px 1px;
margin: 1px 1px 1px 1px;
border-style: solid;
border-width: 1px 1px 1px 1px;
}

宜しくお願いします、

Aベストアンサー

要は教えてgooと同じようなデザインをcssで実現したいのですよね。
THとTDのborder-styleをnoneに変更、TABLEにborder-collapse: collapse;を追加。
これで近くなるのでは。

TABLE {
margin: 0px;
border: 1px solid #8b4513;
border-collapse: collapse;
}

TH {
background-color: #ffa500;
font-size: x-small;
color: black;
font-family:Times New Roman;
padding: 0px;
border-style: none;
}

TD {
height: 20px;
font-size: x-small;
color: black;
font-family:Times New Roman;
padding: 0px;
border-style: none;
}

Qスタイルシートで特定IDかつ特定クラスの要素のスタイルを設定するには?

<div id="hoge" class="piyo">~</div>
上記のように特定IDかつ特定クラスの要素にのみスタイルを適用させるには
CSSにどのように記述すればよいでしょうか?
div#hoge.piyo、div.piyo#hogeいずれも試してみましたがうまく動きませんでした。

Aベストアンサー

というか・・・

idはユニークなはずですから、idで指定しているという時点でidの
スタイルが適用されてよいのでは?

またclassは複数指定ができますので、
<div id="hoge" class="piyo hogepiyo">~</div>として
hogepiyoクラスに対してimportantで、より強いスタイルを指定すれば
よいかもしれません


人気Q&Aランキング

おすすめ情報