如何更改寬度<th>而不會影響​​寬度

Question

我在這裏有2張照片。 1是我的HTML頁面，另一個是我的打印頁面。 我的問題是，我該如何使我的打印頁面與我的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}

玩寬度，直到你在兩個都快樂;）

下面是關於如何建立CSS打印一些偉大的帖子： 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/

只需添加colspan="6"您th設置你的第一個單元格的正確寬度。

<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元素都在做我給他們做邊框，所以我可以看到他們是如何表現。在這種情況下，你沒有<th>細胞相同數量的<td>細胞 - 只需添加一個合併單元格= 6（相同數量的你有細胞）和您<th>細胞在整個表將跨越：

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

還您不需要的寬度，除非你想自動換行（但它聽起來像你不是。）...

哦，沒關係...回答上述