Блог

Главная - Вопросы по программированию - Уменьшить пространство между выравниванием таблиц HTML

Уменьшить пространство между выравниванием таблиц HTML

#css #html #styles

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

Ответ №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>