如何並排居中對齊兩個表格？

Question

我似乎無法將 html 中的 2 個內聯表居中對齊。

我的代碼片段：

<div class="sometables" style="margin-left: auto; margin-right: auto;">
    <table style="display:inline-table;float:left;width:30%;margin-right:230px;">
      <tr>               
        <th>Application<br>Processed</th>
        <th>Application<br>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
      </tr>
  
      {% for processed in processed_data %}
      <tr>
        <td>{{processed[0]}}</td>
        <td>{{processed[3]}}</td>
        <td>{{processed[1]}}</td> 
        <td>{{processed[2]}}</td>
      </tr>
  
      {% endfor %}   
    </table>
    <table style="display:inline-table;float:left;width:30%;">
    
      <tr>
        <th>Application<br>Flagged</th>
        <th>Application<br>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
      </tr>
 
      {% for flagged in flagged_data %}
      <tr>
        <td>{{flagged[0]}}</td>
        <td>{{flagged[3]}}</td>
        <td>{{flagged[1]}}</td> 
        <td>{{flagged[2]}}</td>
      </tr>
      {% endfor %}   
    </table>
</div>

當前output是：

如何將兩個表居中對齊？

研究和盡職調查：

• W3：CSS布局
• HubSpot：CSS 中 Div 或文本居中的 11 種方法
• SO：如何將 a 對齊到頁面的中間（水平/寬度）

Answer 1

根據 OP 對代碼的請求，未檢查，因為它無法在運行時執行。

刪除對內聯margin的引用並創建一個基本的 CSS Grid parent .sometables ，它被拉伸以填充其父級（可能是body ）並在兩個子元素（ table ）之間添加一些方便的間距，其中包含column-gap （任何首選值都可以） ).

注意刪除margin定義...

更新CSS 網格需要一個grid-template-columns定義來並排顯示表格，而不是堆疊在一起。 每個表獲得總可用空間的1fr （一小部分）。

確保訪問Grid by Example ，非常值得您花時間。

 .sometables { /* CSS Grid settings */ display: grid; place-items: center; grid-template-columns: 1fr 1fr; column-gap: 2em; width: 100%; /* to fill full width of parent */ }

 <div class="sometables"> <table style="display:inline-table;float:left;width:30%;"> <tr> <th>Application<br>Processed</th> <th>Application<br>ID</th> <th>Last Name</th> <th>First Name</th> </tr> {% for processed in processed_data %} <tr> <td>{{processed[0]}}</td> <td>{{processed[3]}}</td> <td>{{processed[1]}}</td> <td>{{processed[2]}}</td> </tr> {% endfor %} </table> <table style="display:inline-table;float:left;width:30%;"> <tr> <th>Application<br>Flagged</th> <th>Application<br>ID</th> <th>Last Name</th> <th>First Name</th> </tr> {% for flagged in flagged_data %} <tr> <td>{{flagged[0]}}</td> <td>{{flagged[3]}}</td> <td>{{flagged[1]}}</td> <td>{{flagged[2]}}</td> </tr> {% endfor %} </table> </div>