Tableタグで作成した表の縮小

解決済

質問者：w0a15455
質問日時：2011/07/12 11:59
回答数：3件

HTMLのTableタグで作成した横長の表があるのですが、画面を横にスクロールしなければならず、見づらいので、全体を縮小したいのですが、何か方法はあるでしょうか？

現在思いつくのが、画像にするぐらいです。
他にありましたら、教えてください。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1ベストアンサー

回答者： hinananana
回答日時：2011/07/12 14:30

画像が貼れていないようです・・・。

tableタグにwidthを指定してあげたら縮小できます。

<table border="1" width="500">
<tr>
<th>TEST</th>
<td>sample</td>
</tr>
</table>

もし

/*--CSS--*/

.class_table{
width:900px;
}
.class_table table{
width:100%;
}

/*--HTML--*/

<div class="class_table">
<table border="1">
<tr>
<th>TEST</th>
<td>sample</td>
</tr>
</table>
</div>

このようにしているのであったら

.class_table table{
width:500px;
}

とすると良いでしょう。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/07/12 20:46

単純に、width幅を指定すればよいです。

スタイルシートでボックスモデルは、ディスプレイ幅を参照しますから、width:80%;とwidthを参照すればよいだけです。pxのように固体値にすると変化しません。
　ウェブ標準(今回はHTML4.01strict)で書くと・・
The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
★あくまで本当に表である内容でないと、ウェブ標準とはなりません。たとえばデザインのために表を使うのはだめ！！
★もちろん、画像に置き換えて表示するのもだめ

★タブインデントは＿に置換してあります。
★IE5,IE6など古いブラウザへの後方互換を考慮するならtableにclass名をつけるとか・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<h1>サンプル</h1>
＿<table summary="test">
＿＿<tbody>
＿＿＿<tr>
＿＿＿＿<th abbr="R1">列１</th><th abbr="R2">列２</th><th abbr="R3">列３</th><th abbr="R4">列４</th>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td>
＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td>
＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td>
＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td>
＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td>
＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td>
＿＿＿＿<td>これはテストだよ。内容はテキストだよ。</td>
＿＿＿</tr>
＿＿</tbody>
＿</table>
</body>
</html>

- 1
- 件

通報する

No.3

回答者： naokita
回答日時：2011/07/12 20:55

#1さんの通りで幅を縮小する。

もしくは、画像にすると収まる程度の幅なら、100％表示で良いのでは？
フォントも小さくすれば良いかも。

<table style="width:100%; font-size:75%;" border="1">
<tr>
<td style="width: 20%;">11111</td>
<td style="width: 30%;">22222</td>
<td style="width: 50%;">33333</td>
</tr>
</table>