Question

如何为以下代码减少并行表之间的空间？在数据网格表放置在页面对齐的最末端的情况下，外观看起来有点奇怪。

任何人都可以建议我如何管理表格的对齐方式，以减少放置在左手和右手边的每个极端的表格的空间？

注意：将代码复制到记事本中并将其保存为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>

Answer 1

请通过以下代码替换您的代码

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

减少HTML表格对齐之间的空间

1 个答案: