html - 如何在不影响 宽度的情况下更改 的宽度

Question

我这里有 2 张照片。 1 是我的 HTML 页面，另一个是我的打印页面。我的问题是，如何使打印页面与 html 页面相同？如您所见，打印页面的宽度小于 HTML 页面。

另外，我想问下<th>的宽度如何设置？更长而不影响 <td> 的宽度？这可能吗？

抱歉，我对 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

要获得 pretty-print 页面宽度，请使用媒体查询，例如:

@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 添加: 表格 {width:100%}

并在 style_print.css 添加: 表格{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>