Durubie Durubie - 1 month ago 5
CSS Question

table cell Width % values changing other cell width values by itself?

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="animatedwebsite.css" rel="stylesheet" type="text/css" />

<style>
table, tr, td, th {
border:1px solid black;

}

table {
width:100%;
height:100%;


}
#logo {
height:50px;
width:50px;
top:20px;
left:10px;
border:1px solid black;

}
html {
height:100%;
width:100%;
}
body {
height:100%;
background-color:deepskyblue;
width:100%;

}
</style>
</head>
<body>
<!-- <img id="logo" src="http://mememarketmedia.s3.amazonaws.com/dank/tumblr_oamv1kgXlN1uy57v5o1_1280.jpg"/> -->
<table>
<tr height="12%" id="1">
<th width="15%" id="logoarea"></th>
<th width="85%" colspan="2" id="slogan"></th>
</tr>
<tr height="8%" id="2">
<td width="100%" colspan="3" id="navbararea"></td>
</tr>
<tr height="40%" id="3">
<td width="100%" colspan="3" id="imgarea"></td>
</tr>
<tr id="4">
<td width="33%" id="whyus"></td>
<td width="34%" id="startnow"></td>
<td width="33%" id="chatonline"></td>
</tr>
<tr id="5" height="5%">
<td colspan="3" id="menu123"></td>
</tr>
<tr id="6" height="5%">
<td colspan="3" id="footerarea"></td>
</tr>
</table>


</body>
</html>


So my problem explained better is that the width values from the first first row cells and the fourth row cells change each other whenever altered, as soon as I defined the width of the cells in the first row the 4th rows cells widths start to copy the first row. Im not sure why this happened since its never happened before and I know this is probably something stupid on my part but I couldn't find an answer anywhere to this so please help!

Answer

There is a contradiction in there:

This is the top row:

<tr height="12%" id="1">
    <th width="15%" id="logoarea"></th>
    <th width="85%" colspan="2" id="slogan"></th> 
</tr>

Note: the first cell/th has width="15%"

and this is the fourth row:

<tr id="4">
    <td width="33%" id="whyus"></td>
    <td width="34%" id="startnow"></td>
    <td width="33%" id="chatonline"></td>
</tr>

Here the first cell/td has width="33%"

Whatever a browser makes of this - it's no wonder that changing one of them affects the other in some way - cells in the same column will always have the same width (except when there is a colspan setting)

Comments