如何更改宽度<th>而不会影响宽度

问题描述：

我在这里有2张照片。 1是我的HTML页面，另一个是我的打印页面。我的问题是，我该如何使我的打印页面与我的html页面相同？正如你所看到的，打印页面比HTML页面的宽度要小。如何更改宽度<th>而不会影响宽度

另外，我想问一下如何在不影响宽度<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>

答

要获得例如一个不错的打印页面宽度使用媒体查询：

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

谢谢。和哦，我如何设置属性时，即时通讯打印？ –

在答案中增加了更多 – Timmetje

上帝你我的英雄哈哈谢谢男人:)我会接受你的回答 –

答

提示：当我不知道我的HTML元素都在做我给他们做边框，所以我可以看到他们是如何表现。在这种情况下，你没有<th>细胞相同数量的<td>细胞 - 只需添加一个合并单元格= 6（相同数量的你有细胞）和您<th>细胞在整个表将跨越：

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

还您不需要的宽度，除非你想自动换行（但它听起来像你不是。）...

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

仍然感谢努力的人。并感谢提示 –

如何更改宽度而不会影响​​宽度

相关推荐

如何更改宽度而不会影响宽度