人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

htmlファイルを修正しています。
このページには、PHPタグが埋め込まれた、htmlで記述テーブルがあるのですが、
テーブルのサイズ調整が、上手くできません。

下記のような記述があるとします。

<table>
<tr>
<td width="62">{$t_food_sa_price[t_food_sa]}dollar?</td>
</tr>
</table>

<td>幅62と指定されていますが、62で表示されません。

{$t_food_sa_price[t_food_sa]} ←<td>タグで囲まれた、この部分を削除すると、62で表示されるようになります。

phpタグを埋め込むと、指定したサイズで表示されなくなってしまうようなのですが、
<td>タグで指定した幅に表示させるには、どのように対処すれば良いでしょうか?
phpタグの前後に、何か入れるのでしょうか?

※私はPHPの知識はありませんので、htmlファイル上での修正で完結するような方法があったら教えてください。

●質問者: Tomo
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:HTML PHP サイズ タグ ファイル
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● mogya
●50ポイント

中に書いているPHPコードが出力するHTMLのサイズが62pxより大きいので、その分拡張されてしまっていますね。

<td width="62">
{$t_food_sa_price[t_food_sa]}dollar?
</td>

これを

<td ><div style="width:62px;overflow:hidden;">
{$t_food_sa_price[t_food_sa]}dollar?
</div></td>

こういうふうにしておけば、PHPが何を出力しようと、62pxより大きい物は表示されなくなって、サイズ指定を優先することができます。

でも、こんな強引な手を使うと、例えば¥12800のゼロが表示されなくて¥1280に見えてしまったりするかもしれません。ちゃんと直すのであれば、中のPHPコードを書いた人と相談するのがいいかと思います。


2 ● km1981
●50ポイント

ブラウザは何ですか?

htmlのバージョンは何を指定していますか?


htmlのバージョンを指定していないと

最近のブラウザではhtml5になるものが多いので

tdにはwidth属性は指定できません

htmlだけの場合は「たまたま」62ピクセル以内だったのだと思います


スタイルシートを使うといいと思います


3 ● rouge_2008
●50ポイント

IEで確認したのでしょうか?

IEの場合、テーブル全体の幅を指定していないと、セルの内容に合わせて勝手に広げて表示するようです。

テーブル全体の幅に指定した値が各列の合計より大きい場合は、テーブル全体の幅に指定した値まで勝手に拡げて表示されます。(こちらはFirefoxでも同様です。)

「<table width="各列幅の合計">」等、テーブル全体の幅を正しく指定してみてください。

(項目の列150px、価格の列70pxの場合、合計の220を指定しますが、セルと内容の間の余白を指定している場合はその分も足して合計値を指定します。

※なお、価格を表示するセルの幅が足りないみたいですので、現在の62pxよりもう少し大きい値を指定して置く方がいいと思います。幅が足りない場合、折り返して表示されます。


既に他の回答で出ていますが、スタイルシートを使用する方がいいかもしれません。

CSSの場合、HTML要素に対して列の幅を指定するだけで大丈夫です。(テーブル全体の幅を指定する必要がありません。)

列によって違う幅を指定したい場合は、各列にクラス名を割り当てて、CSSでクラス名に対して幅を指定します。

※IEの場合、指定値より長い内容のセルすべてにクラス名を割り当てる必要がありますが、<colgroup>を使用すると列に対してまとめて指定できるので便利です。

http://www.tohoho-web.com/html/colgroup.htm


例)HTML(※商品名と価格の2列のテーブルの場合)

<table>
<colgroup>
<col span="1" class="item">
<col span="1" class="price">
</colgroup>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>XXXXX</td>
<td>$t_food_sa_price[t_food_sa]}</td>
</tr>
<tr>
<td>XXXXX</td>
<td>$t_food_??_price[t_food_??]}</td>
</tr>
</table>

例)CSS

th, td {
padding: 6px;
}
.item {
width: 80px;
}
.price {
width: 70px;
}

スタイルシートが分からない場合、以下のページを参照してください。

http://www.tohoho-web.com/css/basic.htm


4 ● iooioiaa
●50ポイント

読み込んでいるCSSファイル(インクルード)にtableタグのサイズが指定されていませんか?

例えばwidth:100%とか。

id属性が設定されていないCSSファイルであれば、id属性を設定。

難しければ、tableタグにwidth: 62pxを記述。

もし、インクルードされているCSSファイルが

table {

width: 100%;

}

のようになっているのであれば、

<head></head>部分に

table {

width: 62px;

}

を記述すれば、

htmlファイルを修正するだけです。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ