HTMLのTableのセル内にURL表記があると、td widthで幅を指定しているにもかかわらずデザインが激しく崩れます。何か良い解決方法を教えてください。

URLダミーです。

width=”800”って指定しているこの「”」が全角ですよ。これ、半角にしたら直るんじゃないでしょうか。

<table width=”800” border=”1”>

<TBODY><tr><td width=”30”>

[associates tag]&dev-t=[developer’s token goes here]&BrowseNodeSearch=575110&mode=dvd-jp&type=lite&page=1&locale=jp&f=

↑でなりませんか？ならなかったら気にしないでクダサイ・・・すいません。

^^

スタイルを指定すれば折り返します。

<td width=”30” style=”word-break: break-all;”>

スタイルで以下のように定義すれば良いかと思います

<td width=”30” style=”width:30px;overflow:visible;word-break:break-all;white-space:pre;”>

<td width=”30”>

↓

<td style=”width: 30;”>

に変えて、<tbody>も追加してみてください。

途中で改行されてしまう理由は、URL全体が1つの英単語として判定されるのでピリオドや、ハイフンが入った個所でだけ改行されてしまいます。ではどうすればいいか

１．NOBRタグを使って wbrを改行を許可した居場所に入れる(欠点。ちょっと面倒、完全にWidthde改行されない）

<tr><td width=”30” ><nobr>

[associates<wbr> tag]&dev-t=[<wbr>developer’s<wbr> token<wbr> goes<wbr> here<wbr>]&Browse<wbr>Node<wbr>Search<wbr>=575110&<wbr>mode=dvd-jp&<wbr>type=lite&<wbr>page=1&<wbr>locale=<wbr>jp&f=<wbr>

</tr>

２．一文字ずつスペースを入れる・・・ちょっと微妙・・・ですが

<tr><td width=”30” >h t t p : / / x m l - j p . a m z n x s l t . c o m / o n c a / x m l 3 ? t = [ a s s o c i a t e s t a g ] & d e v - t = [ d e v e l o p e r ’ s t o k e n g o e s h e r e ] & B r o w s e N o d e S e a r c h = 5 7 5 1 1 0 & m o d e = d v d - j p & t y p e = l i t e & p a g e = 1 & l o c a l e = j p & f = h t t p : / / w w w . b l o g k i d . c o m / A m a z o n W e b S e r v i c e s / a d s _ a m a z o n . x s l</td></TR>

</tr>

２A．2を改良してスタイルシートでスペース幅を詰める・・・

<tr><td width=”30” style=”letter-spacing:-0.2em”>h t t p : / / x m l - j p . a m z n x s l t . c o m / o n c a / x m l 3 ? t = [ a s s o c i a t e s t a g ] & d e v - t = [ d e v e l o p e r ’ s t o k e n g o e s h e r e ] & B r o w s e N o d e S e a r c h = 5 7 5 1 1 0 & m o d e = d v d - j p & t y p e = l i t e & p a g e = 1 & l o c a l e = j p & f = h t t p : / / w w w . b l o g k i d . c o m / A m a z o n W e b S e r v i c e s / a d s _ a m a z o n . x s l</td></TR>

いかがでしょう？

セルの結合などや「入れ子」等、構造またはレイアウトが複雑なテーブルでないのなら、

スタイルシートの「table-layoutプロパティにfixedを指定する」方法で如何でしょうか？

あとは、ここ↑の3番目を見ると分かるように、

スペーサーGIFを使って強制的にレイアウトを固体化する方法が考えられます。

もとのテーブルレイアウトが分からないので

サンプルソースは書けませんが、ようはスペーサーGIFを使って、

各セルに「つっかえ棒」をしてやる、という感じです。

頑張ってください。

URLはダミーです。　1で答えてた者です。2度書き込みすみません。

多分ですね、

テーブルが800なのに、セルの指定が30であることに問題があると思います。

800-30＝770の分の指定がされていないので、強引に800まで伸ばされているのではないでしょうか。

ということで、以下をコピペしてください。

DreamWeaverなどのHTMLオーサリングツールで整形しなおしてください。「 」と記述した個所はブランクですんで好きにしてくださいまし。

はてなの自動変換の分は勘弁してください。゜(゜´Д｀゜)゜。

<table width=”800” border=”0” cellspacing=”0” cellpadding=”0”>

<tr>

<td width=”30”>

[associates tag]&dev-t=[developer’s token goes here]&BrowseNodeSearch=575110&mode=dvd-jp&type=lite&page=1&locale=jp&f=

<td width=”770”> </td>

</tr>

</table>

URLはダミー

ならば・・・さっきの回答の１の改良

JavaScriptで自動的に<wbr>を入れる

今度はコピペもOK

関数wbrx(URL名);

で何度でも呼び出せます

まず関数本体

<Script Language=”JavaScript”>

<!-- //

function wbrx(msg){

i=0;

while(msg.length){

if(i>0){

document.write(”<wbr>”);

}

i++;

document.write(msg.substring(0,1));

msg= msg.substring(1, msg.length);

}

}

-->

</SCRIPT>

テーブルの部分

<table width=”800” border=1>

<tr><td width=”30”><NOBR>

<Script Language=”JavaScript”>

<!-- //

wbrx(”

[associates tag]&dev-t=[developer’s token goes here]&BrowseNodeSearch=575110&mode=dvd-jp&type=lite&page=1&locale=jp&f=

”);

-->

</SCRIPT>

<NOSCRIPT>

[associates tag]&dev-t=[developer’s token goes here]&BrowseNodeSearch=575110&mode=dvd-jp&type=lite&page=1&locale=jp&f=

</NOSCRIPT>

</NOBR>

</td></TR>

</tr>

</table>

URL全体が一つの英単語扱いになっており、英単語の途中改行が行われないために問題の状況が起きていると思われますので、この問題を解決するには、CSS で style=”word-break: break-all;” と指定してやるのが正攻法だと思います。