セルの幅を文字数にあわせる方法
- 0 名前： ひろみ ： 2005/03/28 21:27 ［URL］
- お世話になっております。
いろいろ探したのですが、解決法が見つからないので質問させてください。
セルの幅を文字数に合わせたいので、WIDTHの単位として"em"を指定したのですが、
うまく設定できません。
フォントサイズを固定にしていないので、"px"ではなく、"em"を使用しました。
イメージとしては、以下のとおりです。
tableの幅は90％
｜ 5em ｜ 10em ｜ のこり（無指定） ｜
ああああ： かかかか
い いい： きききき
う う： くくく
え え え： けけけけけけけけけ
ところが、幅の指定が無視されているようで、
思ったよりも広くなってしまいます。
どうしたら、文字数分の幅のみ確保できますでしょうか。
「URL」欄に検証中のページがございますので、
よろしくお願いいたします。
- 1 名前： 七鍵 ： 2005/03/30 20:56 ［URL］
- セルの幅を固定にするにはテーブルの幅を固定にしなければならなかったと思います。
# ごめんなさい、あまり自信無いです
試しにテーブルの幅を<table style="width:30em;">のようにしてチャレンジしてみて下さい。
- 2 名前： ico ： 2005/03/31 14:48
- テーブルの幅を指定しなければ、文字数ぴったりになりますよ。
※ただし、幅を指定していないのでウィンドウの端で
折り返されてしまいます。
それが嫌なら、
<NOBR>タグで文字を囲むか、
セルに NOWRAP を入れて改行不可にするなどなど。
- 3 名前： カヅサツ ： 2005/04/01 11:12 ［URL］
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<title>蟲師 / その他感想0501-02</title>
<style type="text/css">
body{
color:#777777;
line-height:1.4;
font-family:"Chicago","Verdana","Osaka-等幅","ＭＳ ゴシック",monospace;
padding: 5px 30px;
}
a:link{color:#3366CC;}
a:visited{color:#663399;}
a:active {color:#336600;}
a:hover {color:#3366CC;}
a:link img,
a:visited img{
border-width: 0px;
}
h1{
width: 39%;
float: right;
margin: 1em 0em;
}
p{
margin: 0px;
}
table{
border-collapse: collapse;
width: 60%;
}
th{
font-weight: normal;
text-align: left;
border-width: 0px 1px 1px 0px;
border-style: solid;
border-color: #777777;
padding: 5px;
width: 5em;
}
td{
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #777777;
padding: 5px;
}
#comment{
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #777777;
padding: 10px;
margin: 1em 0px 0px 0px;
}
#rank{
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #777777;
padding: 10px;
width: 30%;
}
.nc{
display:none;
}
</style>
</head>
- 4 名前： カヅサツ ： 2005/04/01 11:12 ［URL］
- <body>
<h1><a href="" target="rakuten"><img
src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/hoshinobk/img64/img10021068647.jpeg"
alt="蟲師"></a></h1>
<table>
<tbody>
<tr>
<th>種別：</th><td>コミック</td>
</tr>
<tr>
<th>タイトル：</th><td><a href="" target="rakuten">蟲師</a></td>
</tr>
<tr>
<th>著者：</th><td>漆原 友紀</td>
</tr>
<tr>
<th>出版元：</th><td>講談社</td>
</tbody>
</table>
<div id="comment">
<p>“蟲”とよばれる生き物とは異なる存在を追いかける“蟲師”「ギンコ」と蟲と係わってしまった人たちのお話。</p>
<p>けっこうシビアな話も多いのに、読後感が柔らかい。それは作者の人間への視点が温かいからなのかしら。</p>
<p>カラーページの彩色も淡い水彩画風で好き。</p>
<p>貸本で駆け足で読んでしまったのがもったいなかったです。</p>
</div>
<p id="rank"><span class="nc">評価：3.5 /</span> ★★★☆</p>
</body>
</html>
- 5 名前： カヅサツ ： 2005/04/01 11:29 ［URL］
- 一応の解説
・見出しがない→書籍画像を見出しにした→テーブルの右に回り込ませた
・見出しの幅を 39%、テーブルの幅を 60% に、とりあえず、した。
合計が99%になるように、調整してください。
（なんで100%じゃないかというと、テーブルの border および padding分）
（98%くらいが確実かも）
・表の中で、見出しセルは th要素、通常セルは td要素。論理要素を適切に使いましょう。
・「段落」は p要素 です。論理要素を（略）
・「★★★☆」だけだと、音声デバイスで適切に読み上げられない（普通、記号は読み飛ばす）ので、文章も併記した。
- 6 名前： ひろみ ： 2005/04/02 10:18 ［URL］
- 詳しい解説ありがとうございました！
画像をテーブルの外に出すことは思いつきませんでした。
そうすれば、項目名と内容でピッタリの幅にできそうです。
＞th要素
太字でセンタリングが嫌でわざと使わなかったのですが、
よく考えたらCSSで変えたらよかったんですよね。
ｐ要素も、空行が入るのが嫌で…以下同文。
持っているホームページ辞典が2000年発行のものなので、
そろそろ買い換えた方がいいのかもしれませんね。
