今だけ人気マンガ100円レンタル特集♪

例えば
<table border="1" width="650" height="700">
<tr>
<td></td>
<tr>
</table>

高さを700に設定しているので、中に文字を入力し700を超えるようであれば自動的に大きさが広がると思います。

その際TABLEの右側にスクロールをつけて、700をキープする事は可能でしょうか?

またCSSでスクロールバーつきのBOXを作ったときに横のスクロールバーだけを表示するように設定は可能でしょうか??

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<table>要素のheight属性は規格外なので、対応出来ていないブラウザがあるはず。


意図しない表示になる可能性があるので、使わない方がいいと思います。
<td>に対してheightを指定した方がベターかと。

CSSでは横方向スクロールバーのみを表示させるものは無いが、IEが独自拡張として
overflow-x: scroll;
とすると横方向のスクロールバーがIEのみで表示されます。が、非IE系レンダリングエンジン(Firefoa等Geclo系、Opera等)ではエラー扱いで適用されませんので、これも止めた方がよろしいかと。
overflow: auto;

overflow: scroll;
にしておいたほうが無難だと思います。
    • good
    • 0
この回答へのお礼

規格外などのお話を詳しくしていただき感謝します☆

できました♪わざわざぁりがとうございました(・・*)

お礼日時:2006/12/04 23:51

趣味でHPを作成している者です


No,1さんの回答通りですが、タグが
分かり辛そうですので、補足します。
まずスクロールバーを付けるのは
CSSです。次に1つのスペースで
テーブルを作るなら(他との見た目を変えるために
枠組みを作る意味で使っている場合)
<p>要素を使ってもテーブルの様にそこだけ色を変えて
表示できます。
<style type="text/css">
<!--
p{width:650px;   テーブルの場合基本はtd{}で指定します
height:700px;
back-ground-color:#ffffff; お好きな色指定
overflow:auto;   ここがスクロールバーです
}
-->
</style>
<body>
<p>
あああああ…</p>
これでCSSは機能します。
物によって指定を変える場合は
<style type="text/css">
p{.sample(お好きな名前){}
}
と指定して
bodyに<p class="sample">で指定すると使い分けが
出来ます。
スクロールは基本はautoで良いと思います。
そうすれば右側に上下スクロールが付きます。
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSSだけで、テーブルにスクロールバーを表示させたいのですが…

CSSを使い、テーブルにスクロールバーを表示させたいのですが
<div style="height:60px; width:300px; overflow-y:scroll;">
<table border=1 width=300>
:
</table>
</div>
上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか?
出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが…
CSSで
.scroll {
overflow: scroll;
visibility: visible;
height: 100px;
width: 140px;
}
とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。
ご存知の方教えて下さい。

Aベストアンサー

> 出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか?

何だか仰っている事がいまいち分かりづらいのですが、以下の2種類を推測しました。
【A】
「<table>を<div>で入れ子にするマークアップではなく、<table>自体に定義したスタイルでスクロールバーを出したい」という意味であれば、できません。はみ出した部分の処理をする(スクロールバーの表示・非表示を制御)overflowプロパティは適用対象がブロック要素の為、table要素である<table>には適用されないからです。

【B】
「<div style="height:60px; width:300px; overflow-y:scroll;">の様にHTMLのマークアップに直接style属性で定義するのではなく、外部ファイル(もしくは<head>内で<style type="text/css">~</style>)でまとめて定義したスタイルを適用させたい」ということであれば、できます。

以下は【B】の場合のサンプルです。
XML宣言有りのXHTML 1.1で検証。IE6.0/7.0、Firefox2.0~、Opera9.25 on Windows XPで同様の結果を得ています。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<div class="hoge">
<table cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し1</th>
<td>データデータデータデータ</td>
</tr>
<tr>
<th>見出し2</th>
<td>データデータデータデータ</td>
</tr>
<tr>
<th>見出し3</th>
<td>データデータデータデータ</td>
</tr>
</table>
</div>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
div.hoge {
width: 140px;
height: 100px;
overflow: auto;
}
div.hoge table {
border-collapse: collapse;
}
th, td {
font-size: 12px;
border: solid 1px #000000;
padding: 5px;
}
----------------------------------------------------------------------
・"overflow: scroll"とすると、必ずXY両軸のスクロールバーが表示されます。"overflow: auto"にしておけば、子要素(この場合は<table>)の幅が親要素の幅を超えていない限り、X軸のスクロールバーは表示されません。Y軸のスクロールバーは子要素の高さが親要素の高さを超えた時点から発生します。高さに満たない場合は自動的に表示となります。
・"overflow-y""overflow-x:"はIEの独自拡張の為、他の環境では効きません。
・"visibility"の値はディフォルが"visible"なので、この場合は特に定義する必要はありません。

> スクロールバーの色を変更して

"scrollbar-foo-color"(fooの部分:base、face、track、arrow、highlight、shadow、3dlight、darkshadow)"というプロパティがありますが、同じくIEの独自拡張の為、他の環境では効きません。

実現したいイメージが異なる様であれば補足して下さい。

> 出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか?

何だか仰っている事がいまいち分かりづらいのですが、以下の2種類を推測しました。
【A】
「<table>を<div>で入れ子にするマークアップではなく、<table>自体に定義したスタイルでスクロールバーを出したい」という意味であれば、できません。はみ出した部分の処理をする(スクロールバーの表示・非表示を制御)overflowプロパティは適用対象がブロック要素の為、table要素である<ta...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QTableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか?

すみません、お知恵を拝借させてください。
Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか?

下記のソース1のように実現しようとしています。しかしDIVタグに任意の幅を設定(ソース2)
すると、テーブルタグの各列に幅設定が出来なくなってしまいます。幅を設定することは可能
か、設定方法をご存知ならば教えてください。 ※IE6限定で、JScript使用OKです。

Aベストアンサー

ソースを修正してみました。
変更点ですが、
1.セルが勝手に縮まらないようにヘッダーのテーブルサイズを固定しました。
2.ヘッダーのスクロール方法を変更しました。
scrollTopで移動できるのは、overflow:scroll;の記述がある場合のみです。
overflow:scroll;をつけるのは製作の意図と違うと勝手に解釈して、ヘッダーブロックの表示位置をlayerからの相対位置でずらす方法に変更しました。
その方法ですが、layerにもうひとつDIVをはさみ、DIVの相対位置をずらすことで、スクロールについていくようにしました。

以下ソースです
<html>
<head>
<script language="JavaScript">
function initialize(){
var data = document.getElementById("data");
var header = document.getElementById("header");
var cell = data.rows[0].cells;
var wkWidth;
for(var i=0; i<cell.length; i ++){
wkWidth = cell[i].offsetWidth;
header.rows[0].cells[i].width = wkWidth ;
cell[i].width = wkWidth ;
}
//↓↓↓ 1.ヘッダーのサイズを固定しました
header.style.width = data.offsetWidth;

document.getElementById("layer").style.width = "585px";
document.getElementById("region").style.width = "600px";
}

//↓↓↓ 2.ヘッダーの表示方法をDIVの相対位置を変えることで行うようにしました
function SlideHeader() {
//regionがスクロールした分だけDIVの表示位置をマイナスしています
document.getElementById("ViewSpace").style.left = (document.getElementById("region").scrollLeft * (-1)) + "px";
}

</script>
</head>
<body onload="initialize();">
<div id="layer" style="border:1px; overflow-x:hidden; overflow-y:hidden;">
<!-- 新たにDIVをはさみました。
layerに対して相対位置表示できるようにしています。
このDIVの相対位置を、をregionが右にスクロールした分だけ左に動かします。-->
<div id="ViewSpace" style="top:0px; left:0px; position:relative;">
<table id="header" style="margin:0px;" rules="all" border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</div>
<!-- onScrollを変更しています -->
<div id="region" style="height:80px; overflow-x:scroll; overflow-y:scroll" onScroll="SlideHeader()">
<table id="data" style="margin:0px;" rules="all" border="1">
<tr><td>ABCDEFABCDEFABCDABCDEFABCDEF</td><td>ABCDEFABCDEFABCEFABCDEFABCDEF</td><td>ABCDEFABCDEFABCDEFABCDEF</td></tr>
</table>
</div>
</body>
</html>

ソースを修正してみました。
変更点ですが、
1.セルが勝手に縮まらないようにヘッダーのテーブルサイズを固定しました。
2.ヘッダーのスクロール方法を変更しました。
scrollTopで移動できるのは、overflow:scroll;の記述がある場合のみです。
overflow:scroll;をつけるのは製作の意図と違うと勝手に解釈して、ヘッダーブロックの表示位置をlayerからの相対位置でずらす方法に変更しました。
その方法ですが、layerにもうひとつDIVをはさみ、DIVの相対位置をずらすことで、スクロールについていくように...続きを読む

Qテーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。

#test1はちゃんとスクロールバーが付くのに、
テーブル内の設定したセルにはスクロールバーが付きません。
tableタグやth,tdタブにも設定したりと色々しましたが、
付きません。
なぜなのでしょうか。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</title>
<style type="text/css">


table {
background:yellow;

}

th,td {
width:200px;
border:solid 1px #000000;
overflow:scroll;
}

#test1 {
width:100px;
overflow:scroll;
}

</style>
</head>
<body>




テーブル
<br />

<table>
<tr>
<th>見出し1</th><td>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</td>
</tr>
<tr>
<th>見出し2</th><td></td>
</tr>
<tr>
<th>見出し3</th><td>本文</td>
</tr>
</table>


<div id="test1">あああああああああああああああああああああああああああああああああ</div>

</body>
</html>

#test1はちゃんとスクロールバーが付くのに、
テーブル内の設定したセルにはスクロールバーが付きません。
tableタグやth,tdタブにも設定したりと色々しましたが、
付きません。
なぜなのでしょうか。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</titl...続きを読む

Aベストアンサー

> なぜなのでしょうか。

overflowプロパティの適用対象はblock要素”display : block”ですが、<td>/<th>はそれぞれtable要素のグループであり”display : table-cell”ですので適用外となります。
なので、ANo.1の回答者様の仰る通り、セルの中に更にblock要素のタグを入れた上で、それに対するスタイル設定でoverflowプロパティを使用して下さい。
(overflowプロパティ参考)http://w3g.jp/css/display_position/overflow

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Q 内のテーブルを上寄せにするには?

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

Qtableがbodyにはみ出る。。

文章での質問で恐縮ですが、

html例に記載のような形で、レイアウトを作っています。
ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、
右ボックス(div right-box)内のテーブルの行が増えた際(運用上、可変で増えます)に、
tableがdiv構成(wrap-1,wrap-2,right-box,footer)からはみ出して、bodyの領域に出てしまいます。

スタイルシートでは左右のボックスをfloat left、float rightしていて、
テーブルの行が可変なので、left-box以外にはheightは指定していないです。
※left-boxのheight指定は100%

heightを指定しなければ、基本的に行追加に合わせて、可変で動くような気がしているのですが、
どうもうまくいかないです。
left-boxにheightを指定しているのは、left-box内に定義している要素があり、
heightの指定がない場合に、その要素の高さになってしまうので、
right-boxと同じ高さになるように、100%を指定しています。

分かりにくい質問で申し訳ないですが、
right-boxのheightをtableの行追加に合わせて可変にする方法はないでしょうか?

本来、heightなしで可変になるのであれば、
可変にならない原因の推測をお願いします。

---ここからhtml例---
<html>
<head>
</head>
<body>

<div id="wrap-1">

<div id="header">;
</div>

<div class="wrap-2">

<div id="left-box">
</div>

<div id="right-box">
<table id="table">
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
</table>
</div>

</div>

<div class="footer clear"> </body>
</div>

</div>

</body>
</html>

文章での質問で恐縮ですが、

html例に記載のような形で、レイアウトを作っています。
ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、
右ボックス(div right-box)内のテーブルの行が増えた際(運用上、可変で増えます)に、
tableがdiv構成(wrap-1,wrap-2,right-box,footer)からはみ出して、bodyの領域に出てしまいます。

スタイルシートでは左右のボックスをfloat left、float rightしていて、
テーブルの行が可変なので、left-box以外にはheightは指定していないです。
※left-boxのheight指...続きを読む

Aベストアンサー

floatを使わない。floatを使うと、その要素は他から独立してしまいます。
そもそもHTMLおかしいし・・・
textareaがあるということは、formですか?table使う必要がありますか?
left-boxとかright-boxとか、端末によって下に回したりとかしたら名前と整合が取れなくなる。
所詮、メインはtableですからその後に記述したので良い。
 スタイルシートを利用できない端末や、検索エンジンにはこの情報はtableの後でよいはずです。floatを使うと文書の順番も変える必要が出てくる。

[サンプル]HTML4.01strict+CSS2.1
★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input )
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
 で検証済み!!のウェブ標準です。
※タブは_に置換してある。★必ず戻すこと★
1) tableはstaticのままですから、それを含むsection(本文)はあわせて伸縮します。
2) 本文セクションのナビの高さはsectionの高さに合わせて伸縮します。
 section{position:relative} + div.section div.nav{position:absolute;}なので
3) 将来navを上にしようが、左にしようが下にしようが・・自在にデザインできます。
4) 分かりやすいように背景は黄色にしてあります。
5) HTML5にするときは、そのままclass名を要素名に
 <div class="header"></div>→<header></header>
 class名と使い道はHTML5に合わせてある。section,nav,footerも

<!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">
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:80%;margin:0 auto;min-width:640px;max-width:800px;}
/* ここから */
div.section{
position:relative;min-width:0;
min-height:100px;/* section navに最低限必要な高さ */
}
div.section h2,
div.section table[summary="form"]{
margin-left:200px;/* 左をあける */
width:auto;
}
div.section div.nav{
position:absolute;
top:0;
width:200px;
background-color:yellow;
height:100%;
}
div.section div.nav h3{margin-top:10px;}


-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>本文</h2>
__<form action="./">
___<table summary="form">
____<tbody>
_____<tr>
______<th abbr="name">お名前</th>
______<td><input type="text" name="name" size="20" value=""></td>
_____</tr>
_____<tr>
______<th abbr="message">メッセージ</th>
______<td><textarea rows="10" cols="40" name="m1"></textarea></td>
_____</tr>
_____<!-- 自由に加減してください。 -->
_____<tr>
______<th abbr="message">メッセージ</th>
______<td><textarea rows="10" cols="40" name="m1"></textarea></td>
_____</tr>
_____<tr>
______<th abbr="message">メッセージ</th>
______<td><textarea rows="10" cols="40" name="m1"></textarea></td>
_____</tr>
____</tbody>
___</table>
__</form>
__<div class="nav">
___<h3>その他の情報</h3>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2012-08-10 12:00:00 (JST)</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

floatを使わない。floatを使うと、その要素は他から独立してしまいます。
そもそもHTMLおかしいし・・・
textareaがあるということは、formですか?table使う必要がありますか?
left-boxとかright-boxとか、端末によって下に回したりとかしたら名前と整合が取れなくなる。
所詮、メインはtableですからその後に記述したので良い。
 スタイルシートを利用できない端末や、検索エンジンにはこの情報はtableの後でよいはずです。floatを使うと文書の順番も変える必要が出てくる。

[サンプル]HTML4.01strict+CSS2.1...続きを読む

QHTMLの表で幅を指定しても折り返すことは無理なのでしょうか?

以下のHTMLの表は横幅を指定していますが、
すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか?

<html>
<head>
<title>table</title>
</head>
<body>
<table width="570" border="1">
<tr><td width="130"> test1</td>
<td bgcolor="#CCCCCC" width="440">
oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</td></tr></table>
</body>
</html>

Aベストアンサー

私も悩みました。(という意味で経験者)
お書きのソースでは、<td>内に英数字がスペースなしで並んでいますね。
これを「途中で改行できない単語」と認識するのだと想像してます。
質問欄も、gooから拝見しますと、<table width="100%"><tr><td width="80%">
のソースにも関わらず、表示はウインドウの外にはみだしています。

ところどころに<wbr>を挿入したら改行してくれないでしょうか?
cgiとかで受取るなら、連続する1バイト文字を数えて<wbr>を挿入
してから、<td>内に書き出すとか。
URLのように、途中を区切れないなら、
<a href="ooooooooooooooooooooooooooooooooooooooooooo">ooooooo...</a>
のように表示分を短縮するとか。(このサイトの「参考URL」のように)


人気Q&Aランキング