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.
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.
Yesterday a friend has shown me a weird problem he has encountered in his classes. He could not make a pyramid-like table(as shown in my jsfiddle link below).
I've never really dealt with html tables much, but I thought this was just about the program they were using being stupid. But when I tried writing html for it myself, I saw it was more than that...
This is what I was trying:
http://jsfiddle.net/5aDkL/
<table border="1">
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
<td colspan="2">C</td>
<td colspan="1">D</td>
<td colspan="1">E</td>
</tr>
<tr>
<td colspan="1">F</td>
<td colspan="2">G</td>
<td colspan="2">H</td>
<td colspan="1">I</td>
</tr>
<tr>
<td colspan="2">J</td>
<td colspan="2">K</td>
<td colspan="2">L</td>
</tr>
</table>
As you can see, the table doesn't look anything like you would expect(unless you know about this already).
So after some web searching, I came up with the following, which works fine(with a single line of css):
http://jsfiddle.net/SzWHX/
<table border="1">
<col>
<col>
<col>
<col>
<col>
<col>
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
<td colspan="2">C</td>
<td colspan="1">D</td>
<td colspan="1">E</td>
</tr>
<tr>
<td colspan="1">F</td>
<td colspan="2">G</td>
<td colspan="2">H</td>
<td colspan="1">I</td>
</tr>
<tr>
<td colspan="2">J</td>
<td colspan="2">K</td>
<td colspan="2">L</td>
</tr>
</table>
But I was wondering, is there a better way to code this?
I mean, those empty col elements just look silly there, right?
So if anyone can enlighten me, that would be much appreciated.
That "pyramid" looks really ugly:
Especially obvious when you look at the table without borders:
Wouldn't a better compromise be to add the necessary empty ( ) cells so that the spacing is correct? I set all the columns to a width of 20px, you can do this with css without use of col in the below example if desired.
One last comparison:
There is no simpler way at present. This is a good example of a case where the col element is really needed (for the intended styling). The reason is that otherwise there is no way to refer to the 3rd and 4th column in CSS, since no table cell occupies only one slot in such a column.
In theory, the :nth-column() pseudo-class would let us do the styling without the col elements, but it’s really work in progress, being planned (CSS Selectors Level 4).
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/
I have a row in a table that has 3 cells in it with values A, B, and C and the table is the full width of the screen, which is more than enough room for all 3. Right now, when they display, all cells are getting 1/3 of the room, but this isn't what I want. I want the 2nd and 3rd cells to be their "correct" size, and the first cell to take up the difference. I can't just set the width on them because they are dynamically sized. How can I do this?
Just set the width of the table to 100%, the width of A to 100% and B and C to auto.
Tested and working
<table border="1px" width="100%">
<tr>
<td width="100%">A</td>
<td width="auto">BB</td>
<td width="auto">CCC</td>
</tr>
</table>
Code A and C in pixels and give B a width of 100%
Rune's answer with Pistos' comment got me close. The last step was to add style="white-space:nowrap" to the non-greedy columns, giving:
<table border="1px" width="100%">
<tr>
<td width="100%">A wide column</td>
<td style="white-space:nowrap">Compact column 1</td>
<td style="white-space:nowrap">Another compact column</td>
</tr>
</table>
Works for me in Firefox 25.
I tried Diodeus and Rune's methods, but it didn't work for my example. I ended up doing a merge on cells B and C as I couldn't really find anything. Thanks for your help.
Try,
<table border="1px" width="100%">
<tr>
<td width="100%" height="100" style="background:#ff0000; display:block">A</td>
<td width="100%" height="100" style="background:#00ff00; display:block">BB</td>
<td width="100%" height="100" style="background:#ff00ff; display:block">CCC</td>
</tr>
</table>
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.