Hey,
I am using Javascript for my ascx control. I have 2 tables, one below the other. My code written is like
</tr>
</table>
<table style="border-spacing: 15px;">
But when i execute, it shows almost 2 inch space between them. Can some help me out?
Thank you!!
There is not enough information to deduce what is causing the gap. However, I would recommend the free Web Developer addon for Firefox, which will allow you to identify all the elements on the page, and work out which element is filling that gap.
Sometimes using the cellspacing and cellpadding attributes on table can resolve this. Try setting these to 1, or 0 to see what the tables look like without the extra spacing/padding.
<table cellpadding='1' cellspacing='1'>...
There's most probably a CSS style somewhere in your HTML code which sets the margin before or after the tables.
Check the following code:
<!DOCTYPE html>
<head>
<title>Testing tables</title>
<style>
#t1, #t2 {
margin: 10px;
border-collapse: collapse;
border: 1px solid black;
}
</style>
</head>
<body>
<table id="t1">
<thead>
<tr><th>One</th><th>Two</th></tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td></tr>
</tbody>
</table>
<table id="t2">
<thead>
<tr><th>Three</th><th>Four</th></tr>
</thead>
<tbody>
<tr><td>Data 3</td><td>Data 4</td></tr>
</tbody>
</table>
</body>
After you view this code in your browser, try to replace the line margin: 10px; with margin: 0 and see what's changed on the webpage.
You can use the right tools (Firefox / Chrome / Opera) to inspect which part of your code is playing tricks with you.