wie man die Breite von <th> ändert, ohne zu beeinflussen <td> Breite

Ich habe hier 2 Fotos. 1 ist meine HTML-Seite und die andere ist meine Druckseite. Meine Frage ist, wie soll ich meine Druckseite die gleiche wie meine HTML-Seite machen? Wie Sie sehen können, ist die Druckseite weniger breit als die HTML-Seite.wie man die Breite von <th> ändert, ohne zu beeinflussen <td> Breite

Auch ich möchte fragen, wie werde ich die Breite von <th> länger machen, ohne die Breite von <td> zu beeinflussen? Ist das möglich?

Sorry, ich habe nicht so viel Wissen in CSS.

Seite drucken

HTML-Seite

und hier ist mein 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>

Quelle

2016-11-15 adrian pascua

, um eine schöne Druckseitenbreite Verwendung Medienanfragen zum Beispiel zu erhalten:

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

Oder verwendet diffent Sheets mit unterschiedlichen Breiten anstelle des gleichen 100%

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

Und in der style.css add: table {width:100%}

Und in style_print.css hinzu: table {width:297mm}

Spielen Sie mit den Breiten, bis Sie in beiden glücklich sind;)

Hier sind einige tolle Beiträge, wie CSS für den Druck einzurichten: 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/

Nur colspan="6" zu Ihrem th fügen Sie die richtige Breite der ersten Zelle einzustellen.

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

Quelle

2016-11-15 16:02:39 Timmetje

Ihnen danken. und oh, wie kann ich die Eigenschaften beim Drucken einstellen? –

Hinzugefügt mehr in der Antwort – Timmetje

Gott du mein Held haha danke Mann :) Ich werde deine Antwort akzeptieren –

Tipp: Wenn ich weiß nicht, was meine HTML-Elemente tun ich ihnen eine Grenze geben, damit ich sehen kann, wie sie sich verhalten. In diesem Fall müssen Sie nicht die gleiche Menge an <th> Zellen als <td> Zellen - nur ein colspan hinzufügen = 6 (die gleiche Anzahl von Zellen, die Sie haben) und Ihre <th> Zelle wird über die gesamte Tabelle umspannen:

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

auch Sie erfordern nicht die Breite, wenn Sie den Text zu wickeln versuchen (aber es klingt wie Sie sind es nicht.) ...

oh, vergiss ... beantwortet oben

Quelle

2016-11-15 16:08:00 Squivo

immer noch danke für den Aufwand Mann. und danke für den Tipp –

wie man die Breite von <th> ändert, ohne zu beeinflussen <td> Breite

Antwort

Verwandte Themen