https://stackoverflow.com/questions/14899991
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianYou should take a look at that jQuery accordeon. It would be a lot simpler for you. And would make your html a lot cleaner. Also take a look at jQuery library, it would simplify your life using JavaScript a lot. Also, you should put the style in css stylesheet so your css would be a lot more "DRY".
Else you can do a fix by following these steps:
- grouping your table two by two in a div with
float:left. - making all your tables
float : leftand then adapt the margins. - inserting a
<div style="clear : both;" />between the first and second table of each div.
Here is the fiddle showing the behavior
And the source code :
<html>
<head>
<TITLE>Expandable and collapsible table - demo</TITLE>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid)
{
var obj = document.getElementsByTagName("table");
for(i=0;i<obj.length;i++)
{
if(obj[i].id && obj[i].id != tbid)
{
document.getElementById(obj[i].id).style.display = "none";
x = obj[i].id.substring(3);
document.getElementById("lnk"+x).value = "[+] Expand";
}
}
if(document.all){document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";}
else{document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
#tbl1,#tbl1 {display:none; text-transform: uppercase;}
#tbl2,#tbl2 {display:none; text-transform: uppercase;}
#tbl3,#tbl3 {display:none; text-transform: uppercase;}
#tbl4,#tbl4 {display:none; text-transform: uppercase;}
td {FONT-SIZE: 75%; MARGIN: 0px; COLOR: #000000;}
td {FONT-FAMILY: verdana,helvetica,arial,sans-serif}
a {TEXT-DECORATION: none;}
</style>
</head>
<body>
<div style="float : left">
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 1</strong></font></td>
<td bgcolor="#4682B4" align="center" width="50%"><input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl1">
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div> </table>
</td>
</tr>
</table>
<div style="clear : both"></div>
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 2</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk2" type="button" value="[+] Expand" onclick="toggle_visibility('tbl2','lnk2');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl2">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</div>
<div style="float: left; margin-left:50px;">
<table width="300px" border="0" style="float:left;" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 3</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk3" type="button" value="[+] Expand" onclick="toggle_visibility('tbl3','lnk3');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl3">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
<div style="clear: both"></div>
<table width="300px" border="0" style="float:left" cellpadding="5" cellspacing="0">
<tr bgcolor="#4682B4" height="50">
<td width="5%"></td>
<td width="45%"><font size="4" face="tahoma" color="white"><strong>Header 4</strong></font></td>
<td width="50%" bgcolor="#4682B4" align="center"><input id="lnk4" type="button" value="[+] Expand" onclick="toggle_visibility('tbl4','lnk4');"></td>
</tr>
<tr>
<td colspan="3">
<table width="103%" border="0" cellpadding="5" cellspacing="0" id="tbl4">
<tr>
<td colspan="3"><div style="width:300px;height:300px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:1px solid #A3A0A0;background-color:#F0F0F0;-webkit-box-shadow: #0A0A0A 3px 3px 3px;-moz-box-shadow: #0A0A0A 3px 3px 3px; box-shadow: #0A0A0A 1px 1px 1px;"> Just modify width and height values to get what you need...</div></table>
</tr>
</td>
</table>
</div>
</body>
</html>
