Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Losing column widths when printing HTML table

Tags:

html

css

printing

I'm have a page that will be used (and hence styled) only for printing. When I view the page in the browser the column width are as I set them:

<table>
<col width="20%">
<col width="25%">
<col width="5%">
<col width="10%">
<col width="17%">
<col width="15%">
<col width="8%">
<thead>
      header columns
</thead>
<tbody>
      columns
</tbody>
</table>

However, when I print the page the columns are all identical widths. Am I able to set columns as percentages (or at all) when printing?

like image 314
Gregg B Avatar asked Jun 11 '12 16:06

Gregg B


People also ask

How do I keep my column width fixed in HTML?

The width of the columns i.e. td in a table can be fixed very easily. This can be done by adding the width attribute in the <td> tag. If the width is not specified, the width of the column changes according to the change in the content. The specifications of width for the columns can be in pixels, or percentage.

How do I stop a table column from resizing?

Turn off AutoFit Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.

How do I make table columns equal width in HTML?

Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.

How do you print a table in HTML?

document. write('<html><head><title>Table Contents</title>'); //Print the Table CSS. var table_style = document.


1 Answers

Try using <table style="table-layout: fixed;">.

This will force the table to use the specified widths.

Historically widths on table columns have always been more of a "suggestion" to the browser, and act more like a min-width to some extent. Setting table-layout: fixed will circumvent that.

like image 110
Niet the Dark Absol Avatar answered Oct 02 '22 15:10

Niet the Dark Absol