width=100のテーブルでtd width=50 が2つ作ってあります。

これをボタンを押すとtd width=40 width=60とかに、表示した後にセルの幅を変えたいのですが、できないでしょうか?

よろしくお願いします。
※IE専用でもかまいません。

A 回答 (3件)

===========================================================


<INPUT type=text name=txtSize size=4 value=200>
<INPUT type="button" value="変更1" onclick="ChangeSize1();">
<INPUT type="button" value="変更2" onclick="ChangeSize2(txtSize.value);">
<TABLE width="400px" border="1">
<TR>
<TD ID="tdLeft"width="100px" >aaa</TD>
<TD ID="tdRight">bbb</TD>
</TR>
</TABLE>

<SCRIPT language="JavaScript">
function ChangeSize1(){
tdLeft.width = txtSize.value;
}
function ChangeSize2(aSize){
tdLeft.width = aSize;
}
</SCRIPT>
===========================================================

こういうことですか?
「変更1」と「変更2」は微妙に異なる作りです。用途に合わせてください。
(とりあえずIEのみです。)

ものすごく適当ですみません。
    • good
    • 0

 まず、CGIでページを作成すれば簡単にできます。

しかし、これはCGIというもの自体が知らない人には厄介です。
 次にJavaScriptを使う方法ですが、命令としてはそういったことはできません。背景を変える、などは可能ですが。
 よって、その場合は次のようにすることで一応実現できます。

 まず、width=50が2つのページを普通に作ります。
 別に40と60のページを作ります。つまり、それ以外は上と同じです。
 最初に前者のページを表示し、ボタンを押したら後者のページへ飛びます。
 後者のページにも前者へ飛ぶためのボタンを作れば、事実上セルの表示幅だけが変わっているように見えます。

 基本的に、CGIかSSIを利用しないとデータは記録できません。
 またJavaScriptによって、なさりたいような効果を素直に表現することは無理だと思います。
 ダイナミックhtmlというものだったら可能かも知れませんが、それは専門外なので・・・(汗)。
    • good
    • 0

HTMLが動的に作成されるような仕組みになっていれば可能でしょう。


例えばJavaScriptやCGIなどを使えばIE専用でなくても可能だと思います。

幅を変数として持っていれば、その変数の値を変更してリロードすればいけると思います。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qtd width="180" と固定してるのですが・・

<div style="width:500;height:220;overflow:auto;
scrollbar-3dlight-color:#9acd32;
scrollbar-arrow-color:#9acd32;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#9acd32;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#9acd32;
scrollbar-track-color:#ffffff;
">
<table style="font-size:13px; color:magenta;"><tr align="center">
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
</tr></table>
</div>

img には 110×150 のサイズの写真を入れています。
div width="500" にしているので、180×3=540 ですから3枚目のimgが途中で切れて、残りが横スクロールに引っ込むと思ってたのですが、実際にはimgがぎゅうぎゅうに詰まって4.8枚見えるようになります。

何故 td width を固定しているのに変動してしまうかがわかりません。
どうすれば img と img のあいだを余裕もたせて表示することができますでしょうか?
よろしくご教授のほど願います。

<div style="width:500;height:220;overflow:auto;
scrollbar-3dlight-color:#9acd32;
scrollbar-arrow-color:#9acd32;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#9acd32;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#9acd32;
scrollbar-track-color:#ffffff;
">
<table style="font-size:13px; color:magenta;"><tr align="center">
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><img src=""></td>
<td width="180"><...続きを読む

Aベストアンサー

これではいかがでしょう?

<div style="width:500px;height:220px;overflow:auto;
scrollbar-3dlight-color:#9acd32;
scrollbar-arrow-color:#9acd32;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#9acd32;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#9acd32;
scrollbar-track-color:#ffffff;
">

<table width="900" style="font-size:13px; color:magenta;">
<tr align="center">
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td width="180"><img src="" width="110" height="150" alt=""></td>
</tr>
</table>
</div>

これではいかがでしょう?

<div style="width:500px;height:220px;overflow:auto;
scrollbar-3dlight-color:#9acd32;
scrollbar-arrow-color:#9acd32;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#9acd32;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#9acd32;
scrollbar-track-color:#ffffff;
">

<table width="900" style="font-size:13px; color:magenta;">
<tr align="center">
<td width="180"><img src="" width="110" height="150" alt=""></td>
<td wid...続きを読む

Qテーブル(TD)の幅について。

<TD WIDTH=100>この幅指定はディスプレイ幅内のテーブル幅なら有効なんですが
ディスプレイ幅を超えるテーブル幅になると途端に崩れてしまい
意図しないところで勝手に改行されていたりします。
この問題を回避する為には<TABLE>の方にも幅指定してやらないといけないのでしょうか?
それとも回避不能なんでしょうか?よろしくお願いします。

Aベストアンサー

どのバージョンのブラウザで起こってるかもできればかいてもらったほうがいいですが、

方法としては、崩れる部分のTDにNOWRAPと入れるといいと思います。
(NOWRAPは改行しないようにするものです)
なので、
<TD WIDTH=100 NOWRAP>内容</TD>
とすれば、一応は崩れません。

Q同じwidth=200でもセル内の文字によって幅が違う

まず、大体↓な感じの表を作りました(ファイル1)。

<table width="580">
<th width="60">【A列】</th><th width="320">【B列】</th><th width="200">【C列】</th>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
     ・
     ・
     ・
</table>

このHTMLファイルをコピーしてファイル2を作り、
セル内の文字や数値のみ修正し、
随時ブラウザを更新して確認していると、
【C列】の列幅(200)が広くなったり狭くなったりする現象が起き
(その分【B列】も変化し、全体的には580のままです)、
結果的に2つのファイルは【C列】の列幅が違います。

都合上、どちらのファイルも【C列】の列幅は同じにしたいのですが、
何か良い方法はありますでしょうか。

ちなみに、セル内の文字は【B列】も【C列】もオーバー分が折り返されています。
【A列】のみオーバーしないようにしています。

ご回答よろしくお願いします。

まず、大体↓な感じの表を作りました(ファイル1)。

<table width="580">
<th width="60">【A列】</th><th width="320">【B列】</th><th width="200">【C列】</th>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
     ・
     ・
     ・
</table>

このHTMLファイルをコピーしてファイル2を作り、
セル内の文字や数値のみ修正し、
随時ブラウザを更新して確認していると、
【C列】の列幅(200)が広くなったり狭くなったりする現...続きを読む

Aベストアンサー

#3に賛成

tableに580をふったら、3列あれば、2列にしか
幅を設定しない。もしくは3列に幅を設定し
テーブルには幅を設定しないのが正しいやりかた
でしょう。矛盾した数値を設定すれば、表示が
ずれるのは仕方ないこと。

あとセルの幅は、colgroupを使うとより確定
しやすいようです
<table>
<colgroup width="60">
<colgroup width="320">
<colgroup width="200">
<tr><th>【A列】</th><th>【B列】</th><th >【C列】</th></tr>
・・・</table>

Qcssのaリンクで、幅(width=)が設定できない。(FireFoxの場合)

cssでサブメニューを作っているのですが、
<div id="menu_sub_other">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">SPAIN</a></li>
<li><a href="#">MAIL</a></li>
</ul>
</div>

#menu_sub_other a {
color:#183770;
width:160px;
text-align:left;
text-decoration:none;
margin : 0px 0 0 0;
padding:3px 10px 3px 15px;
font-weight:bold;
}
マウスhoverで背景の色が変わるようにしようとしているのですが、
aリンクのwidth:160px;とするとIEではきちんとすべて160pxと幅がそろうのですが、
FireFoxだとメニューのボタン名として入力した
文字分の幅しか得られません。

FireFoxで、aリンクの幅を文字数関係なくすべてそろえる方法はありますでしょうか??
ここ2,3日こんなことで悩んでいます。。(;_;)
どうか、お返事よろしくお願いいたします。

cssでサブメニューを作っているのですが、
<div id="menu_sub_other">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">SPAIN</a></li>
<li><a href="#">MAIL</a></li>
</ul>
</div>

#menu_sub_other a {
color:#183770;
width:160px;
text-align:left;
text-decoration:none;
margin : 0px 0 0 0;
padding:3px 10px 3px 15px;
font-weight:bold;
}
マウスhoverで背景の色が変わるようにしようとしているのですが、
aリンクのwidth:160px;とするとIE...続きを読む

Aベストアンサー

aはinline要素ですからfirefoxの方が正しいでしょう。

この手のメニューにはaのスタイルシートにdisplay:blockをつけてやるのが
常套手段です

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか?
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか?

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。


このカテゴリの人気Q&Aランキング

おすすめ情報