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/
Related
Anyone know why each width:xx% on the table cells are not being used?
Looks like the first row may be set correctly, but the sizes in the second row are being ignored.
http://jsfiddle.net/bobbyrne01/4fLL8md0/1/
<table>
<tr>
<td style="width:80%;">A lot of text on 1 line</td>
<td style="width:20%">Text</td>
</tr>
<tr>
<td style="width:20%">
<label>Directory:</label>
</td>
<td style="width:80%">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
It's not possible any simply way. You can achive that only using more than 2 cells in row and group them.
<table border="1" width="100%">
<col width="20%">
<col width="60%">
<col width="20%">
<tr>
<td colspan="2">A lot of text on 1 line</td>
<td>Text</td>
</tr>
<tr>
<td>
<label>Directory:</label>
</td>
<td colspan="2">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
http://jsfiddle.net/4fLL8md0/2/
As you can see, for this case you need 3 cells with width 20%, 60% and 20%. If you have more rows, more cells or want to divide rows in other percentages, you always need to change the table structure.
Table cells must conform – otherwise it wouldn't be a table! You can use colspan to sorta overcome this limitation.
The way you are trying to achieve the design is totally wrong. There are two ways to do this either use colspan or nested table to achieve this.
You can try the answer given by Panter or try nested table that is the best option as it will be easier to implement and maintain also.
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'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.
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.