css - Reduce space between alignment of HTML tables -
how can reduce space between parallel tables below code? , feel looks bit odd data grid tables placed @ extreme ends of page alignment.
can suggest how can manage alignment tables reduce space of tables placed @ each of extreme ends left hand , right hand side?
note: copy code in notepad , save test.html extension , open in ie or firefox check alignment problem have discussed above.
here code:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>server status</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body><br/><br/><br/><br/> <div style="float:right;"><table id="ll" class="easyui-datagrid" style="width:380px;height:auto;"> <thead> <tr><th field="name2" width="80">status</th></tr> </thead> <tbody> <tr> <td>india</td></tr> <tr><td>canada</td></tr> <tr><td>usa</td></tr> <tr><td>uk</td></tr> </tbody> </table> </div> <div style="float:bottom;"><table id="gg" class="easyui-datagrid" style="width:380px;height:auto;"> <thead> <tr><th field="name2" width="80">status</th></tr> </thead> <tbody> <tr> <td>india</td></tr> <tr><td>canada</td></tr> <tr><td>usa</td></tr> <tr><td>uk</td></tr> </tbody> </table> </div><br/><br/><br/> <div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;"> <thead> <tr><th field="name2" width="80">status</th></tr> </thead> <tbody> <tr> <td>india</td></tr> <tr><td>canada</td></tr> <tr><td>usa</td></tr> <tr><td>uk</td></tr> </tbody> </table> </div> <div style="float:right;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;"> <thead> <tr><th field="name3" width="80">status</th></tr> </thead> <tbody> <tr><td>india</td></tr> <tr><td>china</td></tr> <tr><td>oz</td></tr> <tr><td>uk</td></tr> </tbody> </table> </div> </body> </html>
please replace code below code
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>server status</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body><br/><br/><br/><br/> <div style="width:780px; overflow:hidden; margin:0 auto; margin-bottom:20px;"> <div style="float:right;"> <table id="ll" class="easyui-datagrid" style="width:380px;height:auto;"> <thead> <tr><th field="name2" width="80">status</th></tr> </thead> <tbody> <tr> <td>india</td></tr> <tr><td>canada</td></tr> <tr><td>usa</td></tr> <tr><td>uk</td></tr> </tbody> </table> </div> <div style="float:left;"> <table id="ss" class="easyui-datagrid" style="width:380px;height:auto;"> <thead> <tr><th field="name2" width="80">status</th></tr> </thead> <tbody> <tr> <td>india</td></tr> <tr><td>canada</td></tr> <tr><td>usa</td></tr> <tr><td>uk</td></tr> </tbody> </table> </div> </div> <div style="width:780px; overflow:hidden; margin:0 auto; "> <div style="float:left;"> <table id="gg" class="easyui-datagrid" style="width:380px;height:auto;"> <thead> <tr><th field="name2" width="80">status</th></tr> </thead> <tbody> <tr> <td>india</td></tr> <tr><td>canada</td></tr> <tr><td>usa</td></tr> <tr><td>uk</td></tr> </tbody> </table> </div> <div style="float:right;"> <table id="vv" class="easyui-datagrid" style="width:380px;height:auto;"> <thead> <tr><th field="name3" width="80">status</th></tr> </thead> <tbody> <tr><td>india</td></tr> <tr><td>china</td></tr> <tr><td>oz</td></tr> <tr><td>uk</td></tr> </tbody> </table> </div> </div> </body> </html>
Comments
Post a Comment