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?
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.
Related
I just created a two column, one row table on a Wordpress page. You can see it here: http://www.masteringbodyweightexercise.com/feats-of-strength/
The image I placed in the first column keeps getting smaller as I type into the second column.
How can I lock the first column, or the image in it, so it doesn't get smaller?
I believe you can use CSS:
table-layout:fixed
play arround with fixed, like :
<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
I am making HTML-tables to show data, and I have a varying number of columns in the tables, but want to keep the same number of "columns in the background", to have consistent widths of the columns.
The reason for this is specific to my application and is not relevant to the problem, since this seems to be a bug (or have I misunderstood how col's and colgroup's should work?)
In the HTML I show here I have reduced the number of actual columns to two.
I make my tables using a colgroup like this, and setting the width on the col element with CSS:
Table1:
<table>
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td colspan="1">col1</td>
<td colspan="1">col2</td>
</tr>
<tr>
<td colspan="2">col1</td>
</tr>
</tbody>
</table>
Table 2:
<table>
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td colspan="2">col1</td>
</tr>
<tr>
<td colspan="2">col1</td>
</tr>
</tbody>
</table>
CSS:
col {
width:100px;
}
Both these tables render fine in FireFox, Chrome, IE7 and IE8 (where 'IE' stands for 'Internet Explorer').
In IE9, however, Table 2 is rendered with the width of just one column.
I've tried both with and without table-layout: fixed
I have made a fiddle with these tables, and also the tables with all whitespace removed, to illustrate that this is not related to that table rendering bug in IE9: http://jsfiddle.net/ketnp/1/
IE 9.0 does not render following HTML correctly and I am out of ideas......
Please help.
I CANNOT change "< !DOCTYPE html >". any ideas ?
Thanks.
<!DOCTYPE html>
<html lang="en">
<body>
<table style="table-layout:fixed;" width="100%" border="1">
<colgroup span="120">
</colgroup>
<tbody>
<tr>
<td colspan="120">AAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr>
<td colspan="15">aa</td>
<td colspan="15">ss</td>
<td colspan="90">dd</td>
</tr>
<tr>
<td colspan="120">zzzzzzzz</td>
</tr>
</tbody>
</table>
Colspan = number of columns to combine into a single cell. I am affraid you use it to set width of a column. And that's wrong. Use CSS width property to set width of a column.
<td width="120" colspan="3">
(that was plain HTML) or with CSS
<td style="width:120px" colspan="3">
The markup violates the HTML table mode, as the W3C Markup Validator would tell you, in its somewhat cryptic way. The colspan attribute specifies the number of table columns that a cell spans. You cannot span 120 columns when there are only 3 columns.
It seems to me that what you really want is to divide the available width between the columns so that the relations are 15 : 15 : 90. Simplify this to 1 : 1 : 6 and then turn them to percentages:
<table style="table-layout:fixed;" width="100%" border="1">
<col width="12.5%">
<col width="12.5%">
<col width="75%">
<tbody>
<tr>
<td colspan="3">AAAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr>
<td>aa</td>
<td>ss</td>
<td>dd</td>
</tr>
<tr>
<td colspan="3">zzzzzzzz</td>
</tr>
</tbody>
</table>
Using fixed layout, the widths of columns are determined when the first row is processed. Therefore, the widths need to be set in col elements. Otherwise, the browser, when processing the first row, would not have any width requirements, so it would, by the specs, divide the total space evenly between the columns.
My problem is quite easily demonstrated:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
<colgroup>
<col width="75">
<col width="75">
<col width="75">
<col width="75">
</colgroup>
<tr>
<td colspan="2">Cells 1 + 2</td>
<td colspan="2">Cells 3 + 4</td>
</tr>
</table>
</body>
</html>
While Firefox (15.0.1) creates a table with two cell's, each 150 pixels...
... Internet Explorer (9.0.8112.16421) uses only col three for the width:
As soon as the table contains a row with a cell in the fourth column that does not span over another one, the width definitions work as expected.
I guess that IE things to itself "oh, well, there is no other colum behind the third one - let's ignore the col definition". But I have no idea how to avoid this problem. Any suggestions? And, of course, explanations that go beyond tele-introspection are welcome as well :)
To avoid discussions regarding this example's sense: The columns are defined automatically by a function that does not know if the latter cells will be used separately (at least once) or not.
Set a width for the TABLE itself.
<table border="1" width="300">
I am common table layout return in pure html which has 4 columns
<table>
<colgroup span="1" width="20%"/>
<colgroup span="1" width="30%"/>
<colgroup span="1" width="20%"/>
<colgroup span="1" width="30%"/>
<tr>
<td colspan="3">
question data.......
</td>
<td colspan="1">
Answer data......
</td>
</tr>
<tr>
<td colspan="2">
question data.......
</td>
<td colspan="2">
Answer data......
</td>
</tr>
</table>
This layout should work fine with first row columns should have width of 70 and 30% resp
and second row should have width of 50 and 50 resp. But the output what i see different.
what could be the problem and how to fix it. I couple of solutions for it
1. defining width at column level will work
2. defining a blank row with four columns above or below.
But Why is this happening?
In my experience, assigning a column width when using colspan doesn't work. I don't know why, but the width spec seems to be ignored - anyway, it never seems to do what you would expect.