No.1ベストアンサー
- 回答日時:
画像が貼れていないようです・・・。
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;
}
とすると良いでしょう。
No.3
- 回答日時:
#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>
No.2
- 回答日時:
単純に、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">
<!--
_table[summary~=test]{
__width:80%;/* ここが答え */
__border-collapse:collapse;
__border:solid 2px black;
__margin:0 auto;
__width:80%;
_}
_table[summary~=test] th,table[summary~=test] td{__border:solid 1px gray;}
-->
_</style>
</head>
<body>
_<h1>サンプル</h1>
_<table summary="test">
__<tbody>
___<tr>
____<th abbr="R1">列1</th><th abbr="R2">列2</th><th abbr="R3">列3</th><th abbr="R4">列4</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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- モニター・ディスプレイ WindowsノートPC 13.3で画面縮小したい 画面全体が見えない めり込んでしまってます 1 2023/01/22 13:42
- デスクトップパソコン PC作成のスマート対応フアイルへの転換 1 2022/06/18 19:50
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Excel(エクセル) Excelでこういうカードの作り方 枠線の引き方や、挿入画像の拡大縮小など わかる方教えてください、 2 2022/05/03 21:22
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- MySQL PHP 画像のアップロード Qiita 2 2022/11/28 04:44
- Excel(エクセル) Excelでマウスを使って横スクロールしたい 7 2022/06/07 17:56
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
Tableタグで作成した表の縮小
-
IEでテーブル内のテキストが...
-
表とリスト(ulとtable)の違い...
-
MAC版IEのCSS、paddingを適用す...
-
formのinputなどの幅100%指定
-
table内の画像を中央寄せ、のせ...
-
スタイルシートでpaddingを使う...
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
<img>の右横に<table>を配置したい
-
ホームページでローカルでは表...
-
セルの高さを固定するには?
-
<img>タグにCSSのclass設定可能?
-
td width="180" と固定してるの...
-
td要素内のdiv要素をセンタリン...
-
このHTXLソースが意味する動作...
-
HPビルダー10で、ロゴ、写真...
-
テーブル内のテーブルの高さを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
cssで、テーブルのtdの中の文字...
-
XHTMLに関する質問 順序が逆に...
-
vbscriptで時計を作りたい
-
Tableタグで作成した表の縮小
-
Tableタグ内のspan styleが適応...
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
divで囲んだ文字が消える
-
商品詳細を横並びに表示する方法
-
表とリスト(ulとtable)の違い...
-
入れ子にしたテーブルをheight1...
-
TDタグ内での均等割付の仕方
-
テーブルのセル内の隙間を取れ...
-
td要素内のdiv要素をセンタリン...
-
HTMLのテーブルでそれぞれの大...
おすすめ情報