Why is IE not adhering to my column widths?
- by Trent
This has been driving my crazy trying to solve
Code: http://pastebin.com/rqyw35jG
First of all, I'm rendering in standards mode.
I have a table in IE, with width=100%, and all columns in the table with specified widths except the last column. The intended behaviour is for IE to size the final column so it stretches to the page. This more or less works. However;
Certain conditions seem to break the table widths and cause IE to go and size the table however it pleases.
The table contains a row which is merged across all columns AND
This merged row contains enough text to fill the whole cell AND
Enough text is entered into one of the cells whose column had unspecified width, causing the text to wrap.
When this 3 conditions occur, all the columns move slightly. The text still wraps and you wouldn't normally notice that the columns are the wrong size unless you measure them, or compare the page to a version without wrapped text.
Is this even supposed to happen in standards mode?
Code:
<%@ Page Language="VB" %>
<%@ Import Namespace="Microsoft.SharePoint.Client" %>
<%@ Import namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQLClient" %>
<script runat="server">
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
End Sub
</script>
<%
%>
<!DOCTYPE html />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="width:500px;">egqwgw gqgqwgqg qwgqgqg qgwgqgqg qwgqgg</td>
<td style="width:500px;">gqgqwgqg gqwgqgqgq gqgqgqg qgg</td>
<td>If too much text is entered into this column, the column sizes will begin to change. wehwehweh hwehwh whhwhwh hwehwhwh</td>
</tr>
<tr>
<td>a gqwgqwg gqgqw </td><td>gqgqgqg gqgqg</td><td></td>
</tr>
<tr>
<td colspan="3">Columns only move if text on this line is filling out the whole width of the page. gqwgqwggqg qgqgqwgqg qgqwgqgqg gqgwqgqg gqgqgqgqg qgqgqgqg gqgggqg
qgwgqgqg gqgqgqwgwg qgqwgqgqgq gqgwgwgqg gqgwgq gqwgwgqgqwg qgwgqgqgqwg
qwgqwgqgqg qgwgqgqqg gqwgqwgqwgwqg gqgwgqgwg qwgqwgqgqgq qwgqgqgqg gwqgqgqg
qggqwgqg qggwqgqg
</td>
</tr>
</table>
</body>
</html>
