The following HTML renders perfectly in all common browsers including IE7-9 but fails in IE10. Even when running IE10 in compatibility mode, it fails.
<html>
<body>
<table style="table-layout:fixed;width:500px">
<colgroup>
<col style="width:100px" ></col>
<col ></col>
<col style="width:100px" ></col>
<col ></col>
</colgroup>
<tbody>
<tr>
<td colspan="2">
<div style="background:red;"> red </div>
</td>
<td colspan="2">
<div style="background:green;"> green </div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
While in all other browsers the 2 cells are equal in size, on IE10 (at least when running on Windows7) the first cell is wider than the second.
This HTML in IE 9/Windows 7:
Same HTML in IE 10/Windows 7:
Testpage: http://www.dinkypage.com/167605
Reported Bug: https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly
Does anyone know solution/workaround for this problem?
UPDATE: I asked Microsoft to re-open my reported bug because it's a violation of the w3c standard. The answer is:
"The issue you are reporting is by design. Internet Explorer only uses the first set of TD tags to set the width for a column.".
The w3c standard (http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout) says:
In the fixed table layout algorithm, the width of each column is determined as follows:
A column element with a value other than 'auto' for the 'width' property sets the width for that column.
Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).
That means, this function is broken by design in IE 10. I recommend to use a different browser or stay with IE 9...
My current workaround is the following style:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
table colgroup { display: table-row; }
table colgroup col { display: table-cell; }
}
This makes the browser handle colgroup/col like tr/td and is similar to Teemu's suggestion (but without ugly html hacks). The media selector makes the css only visible to IE10+
I ran into this, in IE9 actually. The only solution I found was, indeed, to put in a hidden dummy first row in the table:
<tr style="visibility: hidden"><td></td><td></td><td></td><td></td></tr>
Then, to get rid of the resulting gap, I apply a negative margin-top to the entire table. Not elegant, but it seems to get the job done.
I usually make like this
<colgroup width="100%"> // for table a whole
<col width="50%"> // for each column
<col width="50%">
</colgroup>
50% for 2 columns, 33% for 3, etc.
This worked for IE10.
Related
I have a table with table-layout set to fixed. In the first row I have a td with text inside. It's something like:
<table>
<tbody>
<tr>
<td colspan="2" style=" min-width: 250px; width: 100%;">
<b>Vendor/Firm Information</b>
</td>
</tr>
<tr>
some content
</tr>
... and so on
</tbody>
</table>
So, the width of the first row is actually less than 250px. It's even less than content. So, I need to know: is there any reason for that? Is there something that don't allow the table cell to take appropriate width?
I use old version of Chrome (22.0.1229.0) and I think that it's rather a bug than incorrect styles.
In latest Chrome everything is alright.
I think that colspan="2" there is the reason.
There is no reasonable way to split that min-width between two spanned columns. So min-width constraint just get ignored on spanned cells.
Please see the response here:
Chrome, Safari ignoring max-width in table
The gist is that "max-width" only applies to block elements. So setting the table to "display: block;" should resolve the issue.
I am facing the issue with html Table element cell width. Width of the table cell is not same in IE8 and IE9. Please find the below code snippet where I set the width for table cell using table colgroup and width for table as 100%.
[Html]
<table id="Grid1_Table" class="Table">
<colgroup>
<col style="width:20px">
<col style="width:20px">
<col style="width:180px">
<col style="width:200px">
</colgroup>
<tbody>
<tr>
<td class="RowHeader"><div> </div></td>
<td class="RecordPlusCollapse" ><div> </div></td>
<td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
</tr>
</tbody>
[CSS]
.RowHeader
{
background-color : black;
}
.GroupCaption
{
background-color : #868981;
}
.RecordPlusCollapse
{
background-color : red;
}
.Table
{
width:100%;
}
Please refer the below fiddler file to check the issue with IE8 and IE9.
http://jsfiddle.net/KgfsM/21/
Could you please check on this?
First of all, the markup violates the HTML table model; if you try to validate the code snippet using HTML5 doctype (and the missing </table> added), the validator will report the error “Table column 4 established by element col has no cells beginning in it.”
Second, you are setting column widths in pixels and the total table width as 100%. This constitutes a request that cannot be fulfilled except in a very special case where the available width happens to coincide with the sum of the pixel widths plus borders, border spacing, and cell spacing. It’s no wonder that browsers react differently to this.
Thus, you need to specify the widths consistently. Either remove the setting of 100% width, or remove at least one of the column width settings. You might still have a problem (browsers may react differently even to this), and table-layout: fixed might not help (or might introduce new problems), but then there would a new, relatively well-defined problem.
I have the following table in my HTML:
<div style="max-width:700px;">
<table border="1">
<tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
<tr><td width="1px">a:</td><td >b</td></tr>
<tr><td width="1px">c:</td><td >d</td></tr>
</table>
<div>
I want the first column width in the second and third row to just fit the content length (that is why I put width="1px" there). In the mean while, I want to table width to just fit the length of the longest content in the table (which is the first row) instead of spanning to the max-width of its bounding div.
It works in Firefox as shown below.
However, in IE 9 it does not work as expected, as shown.
I tried to replace width="1px" with width="1%". But then the table width will span to the max-width of the parent div.
Does anyone know how to fix it in IE?
I have just tested in my IE9, and setting the width to 1px works. But it displays as you presented above in compatibility mode. Have you declared your doctype and all other fun stuff?
It might be because you are using older methods to display the table. You could try styling the table with borders and so on in CSS - such as:
table, td, tr, th{
border:1px solid #f0f;
}
.onepx{
width:1px;
}
<div style="max-width:700px;">
<table>
<tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
<tr><td class="onepx">a:</td><td>b</td></tr>
<tr><td class="onepx">c:</td><td>d</td></tr>
</table>
<div>
and so forth - I am sure you get the idea. this might stop it automagically displaying in compatibility view (if it is the problem).
And finally, because IE9 is so stupid, you will have to turn off the compatibility view (if it is enabled on the page), because all pages within the domain will be viewed in compatibility view.
You mentioned that you have tried setting it to 1%, did you set the other to 99%?
<tr><td width="1%">a:</td><td width="99%">b</td></tr>
<tr><td width="1%">c:</td><td width="99%">d</td></tr>
I want different styles on each column of a table. I've read that you could do that by using <colgroup> or <col>, but I had no luck. I have an example here, and nothing seems to change. Am I doing something wrong? Will this work on xhtml?
I know I could add a "class" attribute on each <td>, but that seems weak.
That's correct. While colgroup itself is supported by all browsers, this isn't true for the attributes of the inner col element. Of possible attributes, only width is supported on all browsers. But unlike CSS, <col width=""> only supports pixel and percentage widths.
Don't use it. Instead, create CSS classes and assign them to each td. Yes, it sucks.
EDIT Updated link above to page with better information
Set your table-layout to auto instead of fixed...
table {table-layout: auto;}
My personal site supports multiple themes and I see these kinds of differences all the time.
You could use css selectors to get similar results without adding extra classes.
As an example if you want to give specific style to a second column you can use:
table>tbody>td:nth-child(2){font-weight: bolder;}
Here is a trick I used which actually worked well. In an generic (site wide) css file I put:
.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}
and so on up to whatever I felt was the maximum number of columns in any table I would ever need on my site.
Then on each table I could define the width with a style such as:
<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">
This made it easy to set the column widths plus I could add code to resize the columns which simply had to change the style property on the table for the desired column. This avoided having to make numerous CCS entries every time I wanted to define the column widths for a table. To change a column width you could use something like this:
document.getElementById("tbl1").style.setProperty("--w2", "123px");
The above simply changes the width of column 2 by changing the --w2 variable value.
If you really need to use cols tags without react restriction then dangerouslySetInnerHTML will help:
<colgroup dangerouslySetInnerHTML={{
__html: `
<col style="background: red;"/>
<col style="width: 20px;"/>
`
}}/>
Note that while this works this is not the recommended way to work with react.
In 2020, if you want different styles on columns, you can:
1. style/CSS <col>, but for only a few properties
2. use th/td:nth-child(#number) in CSS (my preferred solution, no idea about what happens with colspans)
3. manually add a class to the th/td elements
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns
You're not supposed to use the "width" HTML attribute, instead use style/CSS. In the style/CSS for <col> you're supposed to use only "border", "background", "width" and "visibility". You can use ems to express values.
I'm confused: w3 says "The 'width' property gives the minimum width for the column." which looks contradictory to me, given the existence of a "min-width" property. On Firefox 72 (Ubuntu)
<col style="width: 13em">
sets a "fixed" width (as I expected). If I resize the window, narrowing it, the column is resized and the content is wrapped into more lines.
So I just had this same issue... the real problem is that even when style/CSS is used on <col> (rather than HTML attributes), you can still only style the following things:
width
borders
background colors
visibility
Source: https://www.w3.org/TR/CSS21/tables.html#columns
It is working for me like this with colgroup and col
<colgroup align="center">
<col style="background-color:red">
<col style="background-color:yellow">
<col style="background-color:green">
</colgroup>
Suppose I have a table:
<table width="100">
<tr>
<td>
hi i like you you are awesome blah blah blah no no no no
</td>
</tr>
</table>
then the table will be displayed with 100px width just fine
but then if the table becomes:
<table width="100">
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
since the content is only one word, instead of displaying it as 100px, the table's width becomes enlarged to fit the entire huge aaaa word in one line....is there a way to make the width still remain 100px in this scenario by having the huge single word overflows into multiple lines?
Supercalifragilisticexpialidoceous!
As said recently in another question:
You should try this CSS instruction:
td { break-word: word-wrap; }
that works in many browsers (yes, including IE 6, even IE 5.5 but not Fx 3.0. It's only recognized by Fx3.5+. Also good for Saf, Chr and Op but I don't know the exact version for these ones) and don't do any harm in the other ones.
If table's width is still messed up, there is also:
table { table-layout: fixed; }
th, td { width: some_value; }
that will force the browser to use the other table algorithm, the one where it doesn't try to adapt many situations including awkward ones but stick to what the stylesheet says.