MB-Support

パソコン初心者のサポートページ

テーブルの横幅をブラウザに合わせて伸縮させ、特定のセルの最縮小時の幅を指定する方法

 テーブルは、width を指定する事でサイズを制御できます。パーセントで指定すれば、ブラウザのサイズ変更に対応して伸縮します。問題は、広がるのを制御する事ができるものの、最小幅を指定する事ができません。このページでは、画像を挿入して最縮小幅を制御する打開策を説明します。


テーブルの幅の指定方法は、 表の大きさを指定する方法 や、 セルの大きさを指定する方法 で説明しました。どちらも、width と height でピクセル単位で指定する事で、クライアントがブラウザのサイズを変更しても可変される事はありません。 もし、ブラウザのサイズによりテーブルを可変させたい場合は、width にパーセントを指定します。

width="100%"の場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="100%">
  <tr>
   <td>ホームズの思い出</td> 
   <td>ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする



width 100 % を指定すると、ブラウザのサイズを変更しても、テーブルが横幅 100 % に表示されます。 <td> に width が指定されていない場合は、各セルが均等幅に設定されます(表示の幅が 100 % で、セルが横に2つ存在する場合は、各セルに 50 % の幅が設定されます)。

もし、セルの幅を変更したい場合は、td に width パーセントを指定する事で可能です。

テーブルの幅 100 % セルの幅を 30 % と 70 % に指定する場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="100%">
  <tr>
   <td width="30%">ホームズの思い出</td> 
   <td width="70%">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする



30 % + 70 % は テーブルの幅である 100 % になるので計算的に正しいと言えます。 テーブルに 100 % を指定した以上、各セルにピクセル単位で指定する事は不可能です。 なぜならば、クライアントが利用する環境により、ブラウザの幅は異なるからです。

しかし、例外的に、横2つのセルがある場合、片方だけピクセル単位で指定する事は可能です。 これは、正当なやり方ではないと思われますが、正しく動作はします。

テーブルの幅 100 % 左のセルを 200 にして、残りを最大表示する

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="100%">
  <tr>
   <td width="200">ホームズの思い出</td> 
   <td>ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする



これは、テーブル幅が可変するものの、width を指定したセルはブラウザサイズを大きくしても、広がっていく事はありません。 広がるのは、width が指定されてないもう片方のセルです。つまり、テーブル幅 100% = width 200 + ?% を自動で処理してくれると解釈できるでしょう。

問題は、広がるのを制御する事ができるものの、最小幅を指定する事ができません。 つまり、上の例では width で指定した 200 も、ブラウザの幅を縮小させた場合、200 以下に縮小されます。

テーブルを 100 % に表示しつつ、縮小時の最低幅を指定する方法は、今のところ管理人には分かりません。 もしかすると、指定する事ができないのかも知れません。 そこで、画像を挿入して最縮小幅を制御する打開策を説明します。



最縮小幅の画像を挿入する

例えば、テーブル幅 100 % で伸縮させつつ、セル内の最小幅を 200 px にする場合は、200 ピクセル × 1 ピクセルをセルに挿入します。



Windows に付属するペイントを起動して、メニューの「変形(I)」→「キャンパスの色とサイズ(A)」を左クリックします。



幅をセルの最縮小時の幅に設定します。ここでは例として 200 px とします。 視覚的に必要な画像ではないので、高さは最小単位の1ピクセルにします。「OK」を左クリックします。



右のスクリーンショットの様に、高さ1pxの画像が作成されます。 色は、表の色と同系色にする事で、画像を視覚的に隠す事ができます。 「ファイル」→「名前を付けて保存」で、この画像を保存します。



左のセルに画像を埋め込む

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="100%">
  <tr>
   <td width="200" valign="top">
    ホームズの思い出
    <img src="画像" width="200" height="1" />
   </td> 
   <td valign="top">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする



背景と同色の画像を埋め込んでいるため、見えないものの高さ1pxの空間が必要になります。 そのため、valign などで見た目を整える必要があるでしょう。



右はブラウザを広げた場合のスクリーンショット。 左のセル幅は 200px を維持して、右のセルが可変します。



右はブラウザを縮めた場合のスクリーンショット。 左のセル幅は 200px を維持して、右のセルが最小になった場合は、横スクロールバーが表示されます。

右のセルも最小幅を指定するために画像を挿入すれば、事実上、テーブル全体の最小幅を設定する事が可能です。



テキストの改行を無効にする

上のやり方は、絶対的に最小幅を設定できるものの、高さ 1px 分の誤差が生じます。 それが嫌な場合は、画像よりも絶対性は乏しくなりますが、テキストで改行を無効にする事で、最小幅をアバウトに指定できます。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="100%">
  <tr>
   <td width="200" valign="top">
    <nobr>ホームズの思い出</nobr>
   </td> 
   <td valign="top">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする



この場合、最小幅はテキストの幅となります。 この幅は数字では指定できませんが、 <nobr> 〜 <nobr> の間に全角スペースを挿入して調節する事は可能です。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="100%">
  <tr>
   <td width="200" valign="top">
    <nobr>ホームズの思い出  </nobr>
   </td> 
   <td valign="top">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

他のスタイルシートによる誤りを防ぐために、インラインフレームでサンプルを取り込んで表示しています。 iframe をサポートするブラウザでアクセスします。

サンプルに直接アクセスする



上は全角スペースを2個挿入した場合で、右は結果のスクリーンショットです。 「ホームズの思い出」プラス空白2個分でセルが縮まるのが止まり、横スクロールバーが表示されます。

しかし、先にも書きましたが、数値で設定できないので、ブラウザでテキストサイズを小さくした場合、最小幅も変化する事になります。 スタイルシートでフォントサイズを固定する事も可能ですが、いずれにしても絶対的な数値を指定できるやり方ではありません。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項