tableセル内の長い文章の後半をカットする方法
- Internet Explorerで表示することを前提に、テーブルのセル内にある長すぎる文章は後半を表示しないようにすることで、すべてのセルをウィンドウの横幅以内に収めたい考えています。
- このページを印刷するときは、長い文章の後半は改行されて複数行で表示されてしまいます。
- 印刷時にもセル内の文章が改行されず、かつ、すべてのセルが用紙の横幅に収まる方法をお教えください。
- ベストアンサー
tableセル内の長い文章の後半をカットする方法
Internet Explorerで表示することを前提に、テーブルのセル内にある長すぎる文章は後半を表示しないようにすることで、すべてのセルをウィンドウの横幅以内に収めたい考えています。 以下のスタイルシートを用いたHTML文章の場合、ブラウザで表示するのであれば、こちらの考えているレイアウトで表示されるのですが、このページを印刷するときは、長い文章の後半は改行されて複数行で表示されてしまいます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <style> table{width:100%;border-collapse:collapse;border-width:2px;border-color:black;border-style:solid;} td{border-width:1px 2px 1px 2px;border-style:solid;border-color:black;} th{border:solid 2px black;padding:2mm;background-color:#F0F0F0;} div.t{font-size:5mm;overflow:hidden;height:5mm;margin:1mm;word-break:break-all;} </style> <body> <table> <tbody><tr><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th></tr></tbody><tbody> <tr><td><div class="t">文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト</div></td><td><div class="t">文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト</div></td><td><div class="t">c</div></td><td><div class="t">d</div></td><td><div class="t">e</div></td></tr></tbody><tbody> <tr><td><div class="t">a</div></td><td><div class="t">b</div></td><td><div class="t">c</div></td><td><div class="t">d</div></td><td><div class="t">e</div></td></tr></tbody></table> </body> </html> 印刷時にもセル内の文章が改行されず、かつ、すべてのセルが用紙の横幅に収まる方法をお教えください。
- Tank2005
- お礼率36% (52/143)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> DOCTYPEを上記に変えてみるとどうでしょう
その他の回答 (1)
- nori_007
- ベストアンサー率35% (369/1048)
質問の意図が良く理解出来ませんが。 ブラウザで表示させる時のスタイルシートと、印刷時に使用するスタイルシートを使い分けると言うには如何ですか？
関連するQ&A
- tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS
- テーブル（表）の表示について
ブラウザ（現在わかっているのはIE6、7）によって、表の表示が異なる事に悩んでます。 例えば、 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#B2DFEE;text-align:left;margin:15px 15px 15px 15px ; float: left;"><tbody><tr> <td style="border:1px solid #000000" colspan="5"><div align="center"><b>○○</b></div></td> </tr><tr> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr></tbody></table> のような記述だと、右側の罫線が表示されません。 私はFirefoxを使っていて安心していたのですが、友人に指摘されて困っています。 作成した環境はwin xp MCE 2002 sp3です。 ちなみにSafariではきちんと表示されていました。 どこを直せばいいのかどなたか教えてください。 宜しくお願い致します。
- ベストアンサー
- HTML
- TABLE（表）を横に並べたいのですが
こういった表↓（実際はもっと縦が長いです）をhtmlで少し間隔をあけて横に並べて表示したいのですが、どのようにすればいいのでしょうか？可能なのでしょうか？ 宜しくお願い致します。 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#ffffff;text-align:center"><tbody><tr> <td style="border:1px solid #ffcccc" colspan="3">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr></tbody></table>
- ベストアンサー
- HTML
- スタイルシートをhead内で定義したい
下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </HTML>
- 締切済み
- HTML
- borderが1のテーブル
ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？ 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
- スクロール付きのテーブルで、内側に線を付ける方法
添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、CSSで設定しても破線も枠も表示されません。 こういう場合はどうすればいいのでしょうか？ <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }
- ベストアンサー
- HTML
- サイズ指定したテーブルを縦に並べるとセルがズレる
色々と試しているんですが解決できないので教えてください。 CSSで全く同じようにサイズ指定しているテーブルを縦に並べた時、同じようにサイズ指定しているはずなのに、IEではセルの内容（テキストの長さ）によってセルの幅が変わってしまいます。具体的に言うと、ショッピングカートの商品ページのようなものを作ろうとしているのですが、以下のようなソースです。 .menu-table{ width:500px; padding:0px; border-collapse:collapse; } .menu-title{ margin:0px; padding:5px; border:1px solid #ff9900; } .menu-img{ width:110px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style1{ width:70px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style2{ width:300px; margin:0px; padding:5px; } .menu-style3{ margin:0px; padding:5px; } <table width="0" border="0" cellspacing="0" cellpadding="0" class="menu-table"> <tr> <td colspan="3" class="menu-title">商品名</td> </tr> <tr> <td rowspan="4" class="menu-img"><img src="item.jpg" width="100" height="100" /></td> <td class="menu-style1">説明1</td> <td class="menu-style2">あいうえお</td> </tr> <tr> <td class="menu-style1">説明2</td> <td class="menu-style2">かきくけこ</td> </tr> <tr> <td class="menu-style1">価格</td> <td class="menu-style2">\1,000￥</td> </tr> <tr> <td colspan="2" class="menu-style3">あいうえおかきくけこさしすせそたちつてとなにぬねの</td> </tr> </table> こういうテーブルを縦にいくつか並べた時、例えば2つ目のテーブルが「あいうえお」のところに「あいうえおかき」と入力すると、「あいうえお」と入力したテーブルに比べて「説明1」のセル幅が狭くなってしまいます。Firefoxでは綺麗に揃うんですが、どうしてもIEではずれます。ボーダーの幅のぶんも計算に入れて幅を指定し直してもずれるんです。説明が下手すぎてうんざりかもしれませんが、どなたか解決策が分かれば教えてください。
- 締切済み
- CSS
- ＣＳＳについて 初心者です。
勉強中の身なんですが・・ このように設定した場合文章１と文章２が大きく開く状態になるんですが、なぜでしょうか？ また文章１セルの真ん中に表示され文章２が左にひょうじされるのも分りません・・・・ いろいろ調べてみたんですが中々納得ができなくて・・・ 特にこうういう風にやりたいとかは特になくて、なんでこうなるのかが知りたいのです。 詳しい方説明して頂けるとありがたいです。すみませんがよろしくお願い致しますｍ（。。）ｍ 「ＨＴＭＬ」 <table> <tr> <th>見出し</th> <th></th> <th> </th> <th> </th> </tr> <tr> <td>内容</td> <td> </td> <td> </td> <td></td> </tr> </table> 「ＣＳＳ］ table{ width:250px; border-collapse:collapse; border-width:1px; border-style:solid; border-color:#000000; border-spacing:0; } th{ border-width:1px; border-style:solid; border-color:#000000; } td{ border-width:1px; border-style:solid; }
- ベストアンサー
- HTML
お礼
変更してみたところ、印刷プレビューでのデザインが希望通りのものになりました。salonpathさんの助言がなければDOCTYPEの変更という結論にたどり着くことはなかったでしょう。ありがとうございます！