※ ChatGPTを利用し、要約された質問です(原文:tableセル内の長い文章の後半をカットする方法)
tableセル内の長い文章の後半をカットする方法
このQ&Aのポイント
Internet Explorerで表示することを前提に、テーブルのセル内にある長すぎる文章は後半を表示しないようにすることで、すべてのセルをウィンドウの横幅以内に収めたい考えています。
このページを印刷するときは、長い文章の後半は改行されて複数行で表示されてしまいます。
印刷時にもセル内の文章が改行されず、かつ、すべてのセルが用紙の横幅に収まる方法をお教えください。
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>
印刷時にもセル内の文章が改行されず、かつ、すべてのセルが用紙の横幅に収まる方法をお教えください。
お礼
変更してみたところ、印刷プレビューでのデザインが希望通りのものになりました。salonpathさんの助言がなければDOCTYPEの変更という結論にたどり着くことはなかったでしょう。ありがとうございます!