adrian pascua adrian pascua - 24 days ago 9
CSS Question

how to change width of <th> without affecting <td> width

I have here 2 photos. 1 is my HTML page and the other one is my print page.
My question is, how am I going to make my print page the same as my html page? As you can see, the print page is less wide than the HTML page.

Also, I want to ask how am I going to make the width of

<th>
longer without affecting the width of
<td>
? Is that possible?

Sorry, I don't have that much knowledge in CSS.

Print Page
this is the print page

HTML Page
this is the html page

and here is my code:

<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

To get a nice print page width use media queries for example:

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

Or use diffent stylesheets with different widths in stead of the same 100%

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

And in the style.css add: table {width:100%}

And in style_print.css add: table {width:297mm}

Play with the widths untill you are happy in both ;)

Here are some great posts on how to set up CSS for printing: 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/

Just add colspan="6" to your th to set the correct width of your first cell.

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