<th>の幅を変更する方法​​幅

Question

ここには2枚の写真があります。 1は私のHTMLページで、もう1つは私の印刷ページです。 私の質問は、私の印刷ページを私のhtmlページと同じにすることですか？ご覧のように、印刷ページはHTMLページよりも幅が狭いです。

また、<td>の幅に影響を与えずに、<th>の幅を長くする方法について質問したいと思いますか？それは可能ですか？

申し訳ありませんが、私はCSSにそれほど知識がありません。

印刷ページ

HTMLページ

、ここでは私のコードです：

<table width="100%" border="1"> 
    <tr> 
     <th align="left" width="20%">II. Documentation</th> 
    </tr> 
    <tr> 
     <td align="center">Subject Routine</td> 
     <td width="20%" align="center">Person-in-charge</td> 
     <td width="15%" align="center">Complied</td> 
     <td width="10%" align="center">Date</td> 
     <td width="17%" align="center">Remarks</td> 
     <td align="center">Signature</td> 
    </tr> 
    <tr> 
     <td>1. Travel Documents</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>2. National License</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>3. NAC Certificates/MARINA COP</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>4. Medical</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>5. POEA/AMOSUP Contracts</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>6. Flag License</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>7. US Visa</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>8. Joining Port Visa</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>9. Other Certificate</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Answer 1

例えば素敵印刷ページ幅の使用メディアクエリを取得するには：

@media print { 
    @page { 
     margin: 30mm; 
     size:297mm 210mm; 
    } 
} 

たり、同じ100％

<link href="style.css" rel="stylesheet" type="text/css" media="screen"> 
<link href="style_print.css" rel="stylesheet" type="text/css" media="print"> 

の代わりにとのstyle.cssのアドオンに幅の異なるdiffentスタイルシートを使用します。table {width:100%}

そしてstyle_print.cssで 追加： table {width:297mm}

両方で幸せになるまで幅で遊ぶ;）

ちょうどあなたの最初のセルの正しい幅を設定するためにあなたの thに colspan="6"を追加 https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/ https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

：ここ

は、印刷用CSSを設定する方法のいくつかの素晴らしい記事です。

<table width="100%" border="1"> 
 
    <tr> 
 
     <th colspan="6" align="left" width="20%">II. Documentation</th> 
 
    </tr> 
 
    <tr> 
 
     <td align="center">Subject Routine</td> 
 
     <td width="20%" align="center">Person-in-charge</td> 
 
     <td width="15%" align="center">Complied</td> 
 
     <td width="10%" align="center">Date</td> 
 
     <td width="17%" align="center">Remarks</td> 
 
     <td align="center">Signature</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1. Travel Documents</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>2. National License</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>3. NAC Certificates/MARINA COP</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>4. Medical</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>5. POEA/AMOSUP Contracts</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>6. Flag License</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>7. US Visa</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>8. Joining Port Visa</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>9. Other Certificate</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
</table>

Answer 2

ヒント：私は私のHTML要素は、私は、彼らが動作しているかを確認することができますので、私は彼らに境界線を与える何をしているかわかりません。この場合、あなたは<td>細胞として<th>細胞の同じ量を持っていない - だけではcolspan = 6（あなたが持っているセルの数が同じ）を追加し、あなたの<th>セルは、テーブル全体にまたがるます：

<tr> 
    <th colspan="6" align="left">II. Documentation</th> 
</tr> 

はまた、あなたがテキストを折り返すしようとしている場合を除き、あなたが幅を必要としない（しかし、あなたはありませんように聞こえる。）...

ああ、用事...ありがとう