Internet Explorer 8 table cell width bug with colspan set
I have the following html page:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>A title</title>
</head>
<body>
<table style="width: 700px; border: solid 开发者_如何学Python1px green">
<tr>
<td style="border: solid 1px red;" colspan="2">A cell with a bunch of text. The amount of text here increases the 'x' cell.<td>
</tr>
<tr>
<td style="width: 100px; border: solid 1px purple;" >x</td>
<td style="border: solid 1px blue;">Some sample text</td>
</tr>
</table>
</body>
</html>
In all browsers other than Internet Explorer (8), the cell with contents "x" has a width of 100px, and it's adjacent cell fills the rest of the table. In internet explorer 8, it's quite a bit bigger, and it's size varies depending on how much text is in the cell with colspan="2" set. Is there a fix for this bug in IE?
Ok, this is pure insanity. Ray's answer worked for the initial test, but not for my real life example, which led me to create a second test case with Ray's fix:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>title</title>
</head>
<body>
<form>
<table style="width: 700px;">
<tr>
<td colspan="2">Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
</tr>
<tr>
<td style="width:100px; background: green;"><input type="checkbox" value="1" /></td>
<td style="width:600px;">blah</td>
</tr>
</table>
<table style="width: 700px;" border="0">
<tr>
<td colspan="2">Some short text</td>
</tr>
<tr>
<td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td>
<td style="width: 600px;">blah</td>
</tr>
</table>
</form>
</body>
</html>
For some reason, having the input elements within the first table cell makes Ray's solution not quite work.
The solution that did end up solving the real world case we were trying to fix required adding "table-layout:fixed" to the tables, and making the first row in the table have empty cells with the width's set. Here's a modified version of the previously example with the fix I just described:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>title</title>
</head>
<body>
<form>
<table style="table-layout: fixed; width: 700px;">
<tr>
<td style="width: 100px;"></td>
<td style="width: 600px;"></td>
</tr>
<tr>
<td colspan="2">Here is some really long text. For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why. Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
</tr>
<tr>
<td style="background: green;"><input type="checkbox" value="1" /></td>
<td>blah</td>
</tr>
</table>
<table style="width: 700px; table-layout: fixed;" border="0">
<tr>
<td style="width: 100px;"></td>
<td style="width: 600px;"></td>
</tr>
<tr>
<td colspan="2">Some short text</td>
</tr>
<tr>
<td style="background: red;"><input type="checkbox" value="1" /></td>
<td>blah</td>
</tr>
</table>
</form>
</body>
</html>
Really Internet Explorer??? REALLY?
Here is my result for failed td width in IE8:
<table style="width: 100%;" border="1">
<tr>
<td style="width:auto;">td1</td>
<td style="width:15px;">td2</td>
<td style="width:20px;">td3</td>
</tr>
<tr>
<td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
</tr>
</table>
<!-- IE8 HACK 100% WIDTH -->
<table style="width: 100%;" border="1">
<tr>
<td style="width:100%;">td1</td>
<td style="width:15px;">td2</td>
<td style="width:20px;">td3</td>
</tr>
<tr>
<td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
</tr>
</table>
Luke's answer with the "table-layout:fixed" is what finally did it for me. Without "table-layout:fixed", IE continued to ignore the explicit width declarations for the non-colspan cells. With it, everything worked, albeit by having to explicitly tell all the non-colspan cells what their width is instead of just flowing to the left like every other browser on the planet.
Final Score: Luke: +1 IE: Suck it.
Use the setAttribute function. Attribute Name = "colSpan". This works on IE 8 and Firefox also.
Example :
cell.setAttribute("colSpan", 9);
Since you know the size of the table (700) you can work around the bug by setting the width of both cells in the second row. With the second cell set to 600 px, the table behaves.
But it still sucks.
Edit - here is another sucky workaround - add a blank image to the first cell to force the size, then add width of 100% to the xsecond cell:
<tr>
<td style="width: 100px; border: solid 1px purple;" >x<img src="\images\blank.gif" width="100" height="1" /></td>
<td style="border: solid 1px blue;width:100%;">Some sample text</td>
</tr>
If you set the width of the first td (the one with colspan="2") to be 100px, then you get the behaviour you want, at least for this test case.
As far as I can tell the IE8 behaviour is correct according to CSS 2.1 spec here: http://www.w3.org/TR/CSS2/tables.html#width-layout section 17.5.2.2 Automatic table layout. Step 3 looks suspicious.
However, this is probably a spec bug, since it all seems very vague about many details. The algorithm in CSS 3 looks much more carefully specified.
EDIT: This also works with your second test case.
加载中,请稍侯......
精彩评论