印刷時に表の罫線が消える問題について
- 表を作成している際に、印刷をすると一部の罫線が表示されず、消えてしまいます。
- 印刷の倍率を変えると、一部の罫線が表示されたり消えたりする現象が発生しています。
- print用のcssに「border-collapse:separate;」を追加したり、他の対策を試しましたが、問題は解決していません。どのような原因が考えられるでしょうか？ご教授いただけないでしょうか？
- ベストアンサー
表の罫線について （印刷）
行き詰ってしまいましたので、こちらで質問させていただきます。 下記のようなスタイルシートを使用して、表を作成しているのですが、 印刷をすると表の一部の線が消えて出てきません。 印刷の倍率を変えると、消えていた部分が表示され他が消えたりと まちまちです。 /* css ***********************************/ table{ border-collapse:collapse; } table.testTbl td{ border:solid 1px #000; } /* html ***********************************/ <tbale class="testTbl"> <tr> <td height="30" colspan="2">ああああああああああ</td> <td width="220">いいいいいいいい</td> <td>うううううううう</td> </tr> <tr> <td>ああああああああああ</td> <td>いいいいいいいい</td> <td>うううううううう</td> <td>ええええええええ</td> </tr> ・ ・ ・ ・ </table> 上記のような感じで表を組んでいるのですが、何か原因はありますでしょうか？ print用のcssに table{ border-collapse:separate; } をいれてみたら出るかなと思い、入れたのですが、こちらでも一部が消えてしまいます。 どなたかご教授いただければと思います。 説明がわかりづらく申し訳ありませんが、宜しくお願いいたします。
- mayugen148
- お礼率42% (3/7)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
再現できません。どのブラウザでも、またIEの互換モードでも・・ 単純な表だけにして他の要因がないか調べるしかないかと・・ ★タブは＿に置換してあるので戻す。 [HTML4.01 strict]+[CSS2.1] <!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"> <!-- table[summary="テストのための表"]{ border-collapse:collapse; } table[summary="テストのための表"] tbody td{ border:solid 1px black; } table[summary="テストのための表"] tr:first-child td+td{ width:16em; } table[summary="テストのための表"] tr:first-child td+td+td{ width:auto; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table summary="テストのための表"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<td colspan="2">あいうえお</td> ＿＿＿＿＿<td>かきくけこ</td> ＿＿＿＿＿<td>そしすせそ</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>あいうえお</td> ＿＿＿＿＿<td>あいうえお</td> ＿＿＿＿＿<td>かきくけこ</td> ＿＿＿＿＿<td>そしすせそ</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
関連するQ&A
- 長い表を印刷する場合に(修正版)
keyguy 切りの悪いところで切られて改ページされてしまいます 例えば <head><style type="text/css"><!-- table{border-collapse:collapse;} td{border:solid 1px black;} th{border-collapse:collapse;} --></style></head> <table> <caption align=left> <nobr>あいうえおかきくけこ<nobr/> </caption> ... <tr ><td colspan=3>abc</td></tr> <tr ><td>A</td><td>B</td><td>C</td></tr> <tr ><td>A</td><td>B</td><td>C</td></tr> <tr ><th colspan=3 height=9></th></tr> ... </table> のように <tr ><td colspan=3>abc</td></tr> <tr ><td>A</td><td>B</td><td>C</td></tr> <tr ><td>A</td><td>B</td><td>C</td></tr> <tr ><th colspan=3 height=9></th></tr> が繰り返しているときにこの単位ユニットの間で改ページされてしまうのです これを回避することは不可能でしょうか?
- ベストアンサー
- HTML
- 入れ子にしたテーブルの罫線について
htmlとcssを学習し始めた者です。 下記のような表を作りましたが 罫線が2重になってしまいます。 この罫線をダブらないようにしたいのです。 一番左の列で言えば、外枠を残し、100の上、左、右 を消し、200の左右を消し、300の左、右、下を消し 一本の線で書かれた表にしたいと考えています。 ご教示くださるようお願いいたします。 <LINK href="style.css" type="text/css" rel="stylesheet"> <table> <tr> <td> <table> <tr><td>100</td></tr> <tr><td>200</td></tr> <tr><td>300</td></tr> </table> </td> <td> <table> <tr><td>101</td></tr> <tr><td>201</td></tr> <tr><td>301</td></tr> <tr><td>401</td></tr> <tr><td>501</td></tr> </table> </td> <td>12345<br>67890 </td> <td> <table> <tr><td>102</td></tr> <tr><td>202</td></tr> <tr><td>302</td></tr> <tr><td>402</td></tr> </table> </td> </tr> </table> style.css table{ border-collapse: collapse; border: 1px solid #000000; line-height:130%; margin:auto; border-spacing:0; } td{ border: 1px solid #000000; padding:5px;}
- ベストアンサー
- HTML
- スクロール付きのテーブルで、内側に線を付ける方法
添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、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
- HTML 表の中の表
趣味でHPを作り始めたのですが表のところがよくわかりません。 大きな表（外枠）の中に2個目の表を作りたいのですが、どうしても2個目の表が大きな表（外枠）の真ん中に来てしまいます。2個目の表が大きな表の一番上にくっつくようにしたいのですがどうしたらいいのでしょうか。宜しくおねがいします。 <html> <body> <table border="1" height="500" width="300"> <tr> <td> <table border="1" width="100%"> <tr > <td colspan="3" > </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- その他（趣味・娯楽・エンターテイメント）
- ブラウザによって罫線の表示のされ方が異なるのですが。
ブラウザによって罫線の表示のされ方が異なるのですが。 下記ソースで、IE8で表示するとイメージの周りの黒線が消せているのですが、Firefox3.6.8だと黒線が見えます。 いずれのブラウザでも罫線を消したいのですが、どう記述したらいいでしょうか？ <html> <head> <title>test</title> <style type="text/css"> table,td,th,tr { border-collapse: collapse; border: 1px solid #000000; } .nobd { border: 0px solid #ffffff; } </style> </head> <body> <table border="0" cellspacing="0" cellpadding="0" class="nobd"> <tr> <td class="nobd"> <form> <input name="login" type="image" src="img1.gif" alt="ログイン" width="200" height="100"> </form> </td> </tr> </table> </table> </body> </html>
- ベストアンサー
- HTML
- ＰＨＰとＣＳＳを使用して九九表作成について
ＰＨＰとＣＳＳ（スタイルシート）を使用して、九九表を作成しているのですが、うまくいきません。 うまくいかない事象としましては、表がきれいにくっつかなく表と表の間に変な間隔ができてしまって困っております。 何かアドバイスを頂けたら助かりますのでよろしくお願い致します。 ※ＣＳＳは外部ファイルとして作成しました。 〈ＰＨＰファイル〉 <html> <head> <link href="test.css" rel="stylesheet" type="text/css"> <title>九九演算表</title> </head> <body> <table> <?php for($i = 0; $i <=9; $i++) { echo '<tr>'; if ($i == 0) { echo '<td><q>'."".'</q></td>'; } else { echo '<td><q>'.$i.'</q></td>'; } for($j = 1; $j <=9; $j++) { if ($i == 0) { echo '<td><q>'.$j.'</q></td>'; continue; } echo '<td><p>'. $i * $j.'</p></td>'; } echo '</tr>'; } ?> </table> </body> </html> ＜ＣＳＳファイル＞ <style> table{ border-collapse: collapse; border: 2px solid #000000; } q{ font-weight: bold; width:40px; height:30px; text-align: center; border: 1px solid #000000; padding: 2px 8px; border-collapse: collapse; background-color: #ccccff; } p{ width:40px; height:30px; text-align: center; border: 1px solid #000000; padding: 2px 8px; border-collapse: collapse; } </style> 以上です。
- 締切済み
- PHP
- ビルダー9 表の枠（罫線？空白？）を完全になくすには？
会社のHPを作っています。 下記のタグを見て頂くとわかると思うのですが、 一番大きい画像と、その右の画像の間に細い線が入ってしまっています。 （ファイル名は消してあります） 最初は上下にも入っていたのですが、それはどうにか消すことができました。 （どうやったか覚えてないですけど） この線をないものとすることはできますか？ 周りに詳しい人がいなくて、ほんっっとうに困ってます！助けてください(T_T) <TABLE width="785" cellspacing="0" cellpadding="0"> <TBODY> <TR align="left" bgcolor="#ffffff"> <TD colspan="4" rowspan="3" width="691" height="73"><IMG src="" width="691" height="76" border="0"></TD> <TD colspan="2" width="77"><IMG src="" width="94" height="19" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="20" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="37" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="6" height="18"><IMG src="" width="84" height="21" border="0"><IMG src="" width="130" height="21" border="0"><IMG src="" width="156" height="21" border="0"><IMG src="" width="126" height="21" border="0"><IMG src="" width="114" height="21" border="0"><IMG src="" width="175" height="21" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- ホームページ作成ソフト
- 特定のテーブルにだけ任意の書式を適用するHTMLかCSS
特定のテーブルにだけ任意の書式を適用するHTMLかCSS 以下のHTMLテーブルで、入れ子テーブル（区画１～区画４）には罫線なし、 外枠（田の字）だけ、1pxの黒い罫線を引くにはどういうのが効率いいですか？ 【解決案１】こうすると、入れ子テーブル（区画１～区画４）まで罫線が現れてしまいます。 table,td,th {border-collapse: collapse; border: 1px solid #000;} 【解決案２】こうすると、該当する全ての<td>タグを<td class="tdstyle">と仕込むのも面倒です。 table {border-collapse: collapse; border: 1px solid #000;} .tdstyle {border: 1px solid #000;} 【解決案３】外枠（田の字）だけ、以下のようにしたいですが、bordercolorってIEのみ有効なタグですよね？ <table border="1" style="border-collapse: collapse" bordercolor="#111111"> 外枠（田の字）だけに、IDをつけたり識別して、効率よく処理できませんか？ <html> <head> <style TYPE="text/css"> <!-- --> </style> </head> <body> <table cellpadding=10> <tr> <td> <table cellpadding=10><tr><td>区画１</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画２</td></tr></table> </td> </tr> <tr> <td> <table cellpadding=10><tr><td>区画３</td></tr></table> </td> <td> <table cellpadding=10><tr><td>区画４</td></tr></table> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\"> </tr> <tr> <td colspan=\"3\" height=\"2\"> </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64"> </tr> <tr> <td colspan="3" height="2"> </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>
- ベストアンサー
- HTML
お礼
丁寧にありがとうございます。 単純な表だけにしてテストしてみたいと思います。 こちらのソースでも試してみたいと思います。