IE8, Safari rendering differently with td colspan and white-space:nowrap

Discussion in 'CSS' started by youkarthik, Mar 23, 2010.

0
  1. #1 
    
<!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">
<head>
    <title>Test </title>
</head>
<body>
        <table cellpadding="0" cellspacing="0" width="749px" border="1">
            <tr>
                <td style="white-space:nowrap;width:15%">AAAAAAAAAA</td>
                <td style="white-space:nowrap;" align="left">AAAAAAAAAA</td>
                <td style="white-space:nowrap;">&nbsp;</td>
            </tr>
               <tr>
                    <td style="white-space:nowrap;">AAAAAAAAAA</td>
                    <td style="white-space:nowrap;">AAAAAAAAAA</td>
                    <td style="white-space:nowrap;">&nbsp;</td>
                </tr>
            <tr>
                <td style="white-space:nowrap;" colspan="2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
                <td style="white-space:nowrap;">
                    XXXXX
                </td>
            </tr>
        </table>
   </body>
</html>
    HTML:
    The above html code snippet renders differently in IE8 and safari. The 15% width given to the first column is not applied in safari and IE8, but in FF and IE7 it is rendering as per my expectation. Could any one suggest what may be the issue? I want to have the style="white-space:nowrap;" for all the cells.
     
    Last edited: Mar 23, 2010
    youkarthik, Mar 23, 2010 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Welcome to table-layout:auto; the default state, which pretty much says BY THE SPEC that the browser is completely free to make the columns whatever width it thinks is best REGARDLESS of the style applied.

    You can try adding table-layout:fixed which means you'll have to set a percentage width on the middle column - but be warned that if you don't set all your widths properly combining it with white-space:nowrap will allow content to push out of the table.

    Try this:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<title>
	Table Test
</title>

<style type="text/css">

table {
	position:relative;
	zoom:1;
	table-layout:fixed;
	width:749px;
	border-collapse:collapse;
	empty-cells:show;
}

td {
	white-space:nowrap;
	text-align:left;
	border:1px solid #000;
}

.count {
	width:15%;
}

.description {
	width:70%;
}

</style>

</head><body>

	<table>
		<colgroup>
			<col class="count" />
			<col class="description" />
			<col class="value" />
		</colgroup>
		<tr>
			<td>AAAAAAAAAA</td>
			<td>AAAAAAAAAA</td>
			<td></td>
		</tr><tr>
			<td>AAAAAAAAAA</td>
			<td>AAAAAAAAAA</td>
			<td></td>
		</tr><tr>
			<td colspan="2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
			<td>XXXXX</td>
		</tr>
	</table>
	
</body></html>
    Code (markup):
    Just be warned that if your content ends up wider than the column, the columns will NOT resize automatically to try and fit it, and the content will overflow over the column next to it.
     
    Last edited: Mar 23, 2010
    deathshadow, Mar 23, 2010 IP
  3. youkarthik

    youkarthik Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your response..

    I will refine my requirements here..
    I don't want the table width to be fixed. I want the initial table (minimum) width as 749px and it should expand based on the cell contents.
    Similarly i want the first column's width to be minimum as possible (~100px) and it also should expand based on the cell contents.
    I currently have problem only with the internet explorer 8..
     
    youkarthik, Mar 23, 2010 IP