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

要获得良好的打印页面宽度，请使用媒体查询，例如：

@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中添加： 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即可设置第一个单元格的正确宽度。

＆＃13;

<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>

＆＃13;

Answer 2

提示：当我不知道我的html元素在做什么时，我给它们一个边框，这样我就能看出它们的行为方式。在这种情况下，您没有与<th>单元格相同数量的<td>单元格 - 只需添加一个colspan = 6（您拥有相同数量的单元格），您的<th>单元格将会跨越整个表格：

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

除非你试图包装文字，否则你不需要宽度（但听起来你不是。）......

哦，没关系......上面回答

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

2 个答案: