Question

我有这张桌子，但是我无法水平放置它们，我尝试了很多事情，但是我显然缺少一些东西，您会推荐什么？我正在为那些专栏而苦苦挣扎。

更新：我有7个表，它们确实有3列，但行数彼此不同。我正在使用主题引导程序v4。每当我做class="table"时，一切都会出错。

<div class="table">

<table class="table-striped" style="display: inline-block; float: left; ">
  <thead>
    <tr>
      <th style="width:200px;"> Module </th>
      <th style="width:120px;"> Info </th>
      <th> Value </th>
    </tr>
  </thead>
  <tbody>


<tr>
<td> ACU  </td>                 
<td> Fls </td>             
<td> 0</td> </tr>
<tr>
<td>  Mode</td>                    
<td> Trk</td>              
<td> 3</td> 
</tr>
<tr>
<td>  Use</td>                 
<td> PS</td>          
<td> 43</td> 
</tr>

  </tbody>
</table>




<table class="table-striped" style="display: inline-block; margin-left:150px;">
  <thead>
    <tr>
      <th style="width:200px;">  Module </th>
      <th style="width:120px;"> Info </th>>
      <th> Value </th>
    </tr>
  </thead>
  <tbody>
    <tag2>
        <tr>
        <td> PBit</td>          
         <td> Lock</td>    
         <td> 1</td> 
         </tr>
        <tr><td> Bit</td>         
          <td> NA</td>       
          <td> 0</td> 
          </tr>
        <tr>
        <td> it</td>          
         <td> Lock</td>    
         <td> 1</td>
         </tr>
        <tr>
        <td> Bit</td>         
          <td> NA</td>      
          <td> 0</td> 
          </tr>
        <tr>
        <td> Bit</td>         
        <td> Lock</td>    
         <td> 1</td>
         </tr>
        <tr>
        <td> Bit</td>         
        <td> NA</td>       
        <td> 0</td> 
        </tr>

  </tbody>
</table>

Answer 1

只需将表position更改为inline-block。这样一来，您的表格元素就可以彼此水平放置在同一行上。您应该在css文件或文档的head中执行此操作，而不是内联（如果可能）。另外，作为参考，display:float无效的CSS。这是给您的fiddle。

table{
  border:1px solid black;
  display:inline-block; 
  margin:20px;
}

<table>
  <thead>
    <tr>
      <th> Module </th>
      <th> Info </th>
      <th> Value </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Mode</td>                    
      <td> Track</td>             
      <td> 3</td> 
    </tr>
    <tr>
      <td> A</td>               
      <td> PS</td>          
      <td> 43</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th> Module </th>
      <th> Info </th>
      <th> Value </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Mode</td>                    
      <td> Track</td>             
      <td> 3</td> 
    </tr>
    <tr>
      <td> A</td>               
      <td> PS</td>          
      <td> 43</td>
    </tr>
  </tbody>
</table>

Answer 2

我添加了额外的merge_table div，将其中的两个表包装在其中，以便在我可以使用flexbox并排放置表之后。

我使用d-flex类，代表display: flex，并且为了区分我添加的两个表ml-3代表margin-left。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="merge_table d-flex">
    <table class="border">
        <thead>
            <tr>
                <th> Module </th>
                <th> Info </th>
                <th> Value </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Mode</td>                    
                <td> Track</td>             
                <td> 3</td> 
            </tr>
            <tr>
                <td> A</td>               
                <td> PS</td>          
                <td> 43</td>
            </tr>
        </tbody>
    </table>

    <table class="border ml-3">
        <thead>
            <tr>
                <th> Module </th>
                <th> Info </th>
                <th> Value </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Mode</td>                    
                <td> Track</td>             
                <td> 3</td> 
            </tr>
            <tr>
                <td> A</td>               
                <td> PS</td>          
                <td> 43</td>
            </tr>
        </tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 3

尝试一下：-

<!DOCTYPE html>
<html lang="en">
    <style>
        .tbl{
            border : 1px solid black;
            float: left;
            margin:  0 5px;
        }
        .row{
            margin: 5px;
        }
        .clear{
            clear: both;
        }

    </style>

    <body>
        <div class="row">
            <table class="tbl2 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>

            <table class="tbl2 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>


            <table class="tbl3 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>
            <div class="clear"></div>
        </div>
        <div class="row">
            <table class="tbl4 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>

            <table class="tbl5 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>

            <table class="tbl6 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>
            <div class="clear"></div>
        </div>
        <div class="row">
            <table class="tbl7 tbl">
                <tr>
                    <td>2-11</td>
                    <td>2-12</td>
                    <td>2-13</td>
                </tr>
                <tr>
                    <td>2-21</td>
                    <td>2-22</td>
                    <td>2-23</td>
                </tr>
                <tr>
                    <td>2-31</td>
                    <td>2-32</td>
                    <td>2-33</td>
                </tr>
            </table>
            <div class="clear"></div>
        </div>
    </body>
</body>
</html>

输出为：

水平对齐桌子

3 个答案: