html - 水平对齐表格

Question

我有这张 table ，但我无法将它们水平并排放置，我尝试了很多东西，但我显然遗漏了一些东西，你会推荐什么？我正在为那些专栏而苦苦挣扎。

更新: 我有 7 个表，它们确实有 3 列，但行数彼此不同。 我正在使用主题 Bootstrap 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

我添加了额外的 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>