Table with a div inside of it
Hi,
I'm trying to code two table a parent table with a child table. I want the child table to have a div wrapped around it. However the display none is not working on it. Both table are visible at time of rendering the web page. Any help on this would be greatly appreciated.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<TABLE BORDER='0'><tr>
<td><A onClick='toggle()'><IMG src=./image/closed.gif height='14px' width='12px' />123 </A></td>
<td>AA</td><td>01</td>
<DIV style='display: none;' id ='test'>
<TABLE BORDER='0'> <th><tr style='font-weight:bold'>
<td>Description</td>
<td>NS</td></tr>
<th><tr><td>product</td>
<td>54321</td></tr>
</TABLE></div>
</tr></TABLE>
</body>
</html>
Possible Solution To Web CSS Issue
When doing web applications, When you are using divs within a table they should always be enclosed with a table cell <td></td>. If the div is outside of those within the table, the display:none; CSS will not work. I tried it on my own webserver and found that to be the case. Here is your HTML rewritten to correct the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<TABLE BORDER='0'><tr>
<td><A onClick='toggle()'><IMG src=./image/closed.gif height='14px' width='12px' />123 </A></td>
<td>AA</td><td>01</td>
<td>
<DIV style='display: none;' id ='test'>
<TABLE BORDER='0'> <th><tr style='font-weight:bold'>
<td>Description</td>
<td>NS</td></tr>
<th><tr><td>product</td>
<td>54321</td></tr>
</TABLE>
</div>
</td>
</tr></TABLE>
</body>
</html>
Michael G. Workman
michael.g.workman@gmail.com
