減少HTML表格對齊之間的空間

如何縮小以下代碼的並行表格之間的空間？數據網格表放置在頁面對齊的極端時，外觀看起來有些奇怪。減少HTML表格對齊之間的空間

任何人都可以建議如何管理表格的對齊以減少放置在每個極端左右手邊的表格的空間？

注意：將代碼複製到記事本中，並將其保存爲test.html擴展名，並在IE或Firefox中打開以檢查上面討論的對齊問題。

下面是代碼：

<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>

來源

2014-06-27 ScriptLearner

請通過下面的代碼

<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>

來源

2014-06-27 10:46:02 codeee

作品對我的情況下更換你的代碼.. – ScriptLearner

減少HTML表格對齊之間的空間

回答

相關問題