开发者

How to reduce gap between 2 tables in Javascript

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 whe开发者_如何学Pythonn 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜