テーブルのセル内に文字が入っていなくてもボーダーを表示させるにはどうしたらよいのでしょうか?ご指導お願い致します。

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

A 回答 (1件)

全角スペースや <br> を入れると表示されるようになります。

    • good
    • 0
この回答へのお礼

早速、試してみたところ
きちんとボーダーが表示されるようになりました。
解決できてスッキリです!
ありがとうございましたm(__)m

お礼日時:2002/04/02 10:37

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

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

Q次のテーブルのセル内文字を小さく

したいのですがセル内文字ごとに<h7></h7>を付けると文字は小さくなるもののセルの高さがむしろ高くなり文字が上に貼りついてしまいます
セルの高さも同じように文字にあわせて小さくできるような設定はあるでしょうか?


<table border=1 cellspacing=0 cellpadding=0>
<caption align=left>
<nobr>あいうえおかきくけこ<nobr/>
</caption>
<tr><td colspan=3>abc</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td colspan=3 height=15></td></tr>
</table>

Aベストアンサー

<table border=1 cellspacing=0 cellpadding=0
font size=2></font>

など、フォントを指定すればいいのでは

Qテーブルのセル内のマージン

テーブルのセル内のマージンをセルごとに変更する
ことはできますか?
テーブルでわけて、セル内にインラインフレームや画像、テキストデータを入れたいのですが、画像とインラインフレームはセルいっぱいまで、テキストはマージンをとりたい場合どうしたらよいのでしょうか?
よろしくお願いします。

Aベストアンサー

>画像とインラインフレームはセルいっぱいまで

セルの幅と高さを指定しないか、
画像やインラインフレームの幅や高さとセルの幅と高さを同じにすればよいと思います。

>テキストはマージンをとりたい場合

スタイルシートにて設定すればよいと思います。

例:
<TD style="padding-top : 10px;padding-left : 20px;padding-right : 30px;padding-bottom : 40
px;">

Qテーブル内セルの大きさが途中で変わる

 テーブルを使って表を作っている(下記のURLから入ってご覧下さい)のですが、2つめの表からセルの幅が変わり、表示がおかしくなっています。原因と、解決方法を教えてください。宜しくお願いします。

 http://www.geocities.jp/jomachokankyo/kogaishi

Aベストアンサー

 テーブルは、一般には自動調整されます。これを止めるには、table-layout を使います。↓
http://www.tagindex.com/stylesheet/table/table_layout.html

 今回の場合、具体的には、一部を下記のように書き換えればよいでしょう。↓

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=ja><HEAD>
・・・・途中省略・・・・
.g1 {
LINE-HEIGHT: 20px
}
TABLE { table-layout: fixed; } /* ここは変更 */
.t1{WIDTH: 150px;} /* ここは挿入 */
.t2{WIDTH: 390px;} /* ここは挿入 */
.t3{WIDTH: 190px;} /* ここは挿入 */
A:link {
・・・・途中省略・・・・
<P class=g1>発生から平成10年度まで</P></CAPTION>
<TBODY>
<TR>
<TH class=t1>年月日</TH> <!-- ここは修正 -->
<TH class=t2>項目</TH> <!-- ここは修正 -->
<TH class=t3>備考(関係資料)</TH></TR> <!-- ここは修正 -->
<TR>
<TD width=150>昭和53年頃</TD>
・・・・途中省略・・・・
<P class=g1>平成11年度から平成 年度まで</P></CAPTION>
<TBODY>
<TR>
<TH class=t1>年月日</TH> <!-- ここは修正 -->
<TH class=t2>項目</TH> <!-- ここは修正 -->
<TH class=t3>備考(関係資料)</TH></TR> <!-- ここは修正 -->
<TR>
<TD width=150>平成11年5月16日</TD>
・・・・以下省略・・・・

参考URL:http://www.tagindex.com/stylesheet/table/table_layout.html

 テーブルは、一般には自動調整されます。これを止めるには、table-layout を使います。↓
http://www.tagindex.com/stylesheet/table/table_layout.html

 今回の場合、具体的には、一部を下記のように書き換えればよいでしょう。↓

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=ja><HEAD>
・・・・途中省略・・・・
.g1 {
LINE-HEIGHT: 20px
}
TABLE { table-layout: fixed; } /* ここは変更 */
.t1{WIDTH: 150px;} /* ここは挿入 */
.t2{WIDTH: 390px;} /* こ...続きを読む

Q固定幅div内のテーブルセルの幅指定方法

幅を指定して横スクロールバーを有効にしたdivがあります。
その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。
tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。
解決方法がありましたらお願いいたします。

HTML:標準モード
UA:Windows xp IE6
サンプルコード:
<style>
div{
height:200px;
width:200px;
overflow-x:scroll;
border:#f99 solid 1px;
}
table{
background:#ddd;
border:#666 solid 1px;
}
td{
width:100px;
border:#666 solid 1px;
}
</style>


<div>
<table>
<tr>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
</tr>
</table>
</div>

幅を指定して横スクロールバーを有効にしたdivがあります。
その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。
tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。
解決方法がありましたらお願いいたします。

HTML:標準モード
UA:Windows xp IE6
サンプルコード:
<style>
div{
height:200px;
width:200px;
overflow-x:scroll;
border:#f99 solid 1px;
}
table{
background:#ddd;
border...続きを読む

Aベストアンサー

 このようにしたいのでしょうか。↓
<html>
<head>
<style type="text/css">
<!--
div{
height:200px;
width:200px;
overflow-x:scroll;
border:#f99 solid 1px;
}
table{
table-layout: fixed;600px;
background:#ddd;
border:#666 solid 1px;
}
td{
width:100px;
border:#666 solid 1px;
}
-->
</style>
</head>
<body>
<div>
<table>
<tr>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
</tr>
</table>
</div>
</body>
</html>

参考URL:http://www.tohoho-web.com/css/reference.htm#table-layout

 このようにしたいのでしょうか。↓
<html>
<head>
<style type="text/css">
<!--
div{
height:200px;
width:200px;
overflow-x:scroll;
border:#f99 solid 1px;
}
table{
table-layout: fixed;600px;
background:#ddd;
border:#666 solid 1px;
}
td{
width:100px;
border:#666 solid 1px;
}
-->
</style>
</head>
<body>
<div>
<table>
<tr>
...続きを読む

Qテーブル内のセル間にスペースを空けたい

tableタグとtr、tdを使って2行2列の表を作っています。

(1)それぞれのセルとセルの間にスペースを空けたいです。
(2)セルの中の文字の開始位置を1文字分程空けたいです。

CSSでの指定でも構いません。

tdやpにmarginを指定したり、cellpadingなど色々試しましたがうまく行きません。
どうかご教授をお願いします。

Aベストアンサー

border-collapse:separateとborder-spacingで指定します。collpaddingは非推奨です。
セル内の余白はpaddingです。配置はtext-alignとvertical-alignを使用します。

tablekborderは本来、border-collapse:separateほほ分離ボーダーモデルのはずです。
仕様書にはcollpaceのはずなのですが。
また、border-spaceは0が仕様書なのですが、ブラウザは1px空けます。
★tableの描画は仕様書どおりにブラウザが実装していないため、きちんと指定する必要があります。★

サンプル
<table summary="sample1">
 <caption>価格表</caption>
 <tbody>
  <tr>
   <th abbr="name">商品名</th><th abbr="コード">商品コード</th><th abbr="price">価格</th>
  </tr>
  <tr>
   <th abbr="no1">商品1</th><td>0012</td><td>\1,200-</td>
  </tr>
  <tr>
   <th abbr="no2">商品2</th><td>0012</td><td></td>
  </tr>
  <tr>
   <th abbr="no3">商品3</th><td>0013</td><td>\1,500-</td>
  </tr>
 </tbody>
</table>
という表があるとします。
★ひとつずつ宣言を追加して確認すること。

まずセレクタでこの表を特定します。
table[summary="sample1"]{}/* 要素セレクタを使います。*/
次に表の枠線について指定します。

/* table要素のborder */
table[summary="sample1"]{
border:solid 2px black;
}
/* table要素の背景 */
table[summary="sample1"]{
background-color:yellow;
}
/* セルの指定 */
table[summary="sample1"] th,
table[summary="sample1"] td{
border:solid 1px gray;
}
/*背景色を指定します。 */
table[summary="sample1"] th{
background-color:silver;
}
table[summary="sample1"] td{
background-color:lime;
}
/* セル間が開いていると思います。 その間隔を指定してみます。 */
table[summary="sample1"]{
border-collapse:separate;/* separate指定する */
border-spacing:10px 4px; /* 最初の値が上下 ふたつ目の値が左右、ひとつだけだと周囲 */
}
/* 内容のないセルの表示・非表示 */
table[summary="sample1"]{
empty-cells:hide;/* showで見える。 */
}
table[summary="sample1"] caption{
caption-side:left;
font-weight:bold;
}
/* 今度はくっつける */
/* セル間が開いていると思います。 その間隔を指定してみます。 */
table[summary="sample1"]{
border-collapse:collapse;/* collapseを指定する */
border-spacing:0;
}

border-collapse:separateとborder-spacingで指定します。collpaddingは非推奨です。
セル内の余白はpaddingです。配置はtext-alignとvertical-alignを使用します。

tablekborderは本来、border-collapse:separateほほ分離ボーダーモデルのはずです。
仕様書にはcollpaceのはずなのですが。
また、border-spaceは0が仕様書なのですが、ブラウザは1px空けます。
★tableの描画は仕様書どおりにブラウザが実装していないため、きちんと指定する必要があります。★

サンプル
<table summary="sample1">
 <caption>...続きを読む


人気Q&Aランキング

おすすめ情報