How to center align two table side by side?

Question

I can't seem to center align 2 in-line tables in html.

my snippet of code:

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

Current output is:

How can I center align the two tables together?

Research and Due Diligence:

Can't run this, maybe `.sometables { display: grid; place-items: center; width: 100% /* not sure */ }` works for you? And what's with the inline 'margin-right: 230px'? This messes with your Left/Right positioning... — Rene van der Lende, Jan 28 '23 at 00:58
@RenevanderLende I'm new to HTML - I wanted two tables side by side with some spacing in between... Can you give me any suggestions?! — 3kstc, Jan 28 '23 at 01:07
You're obviously using some pre-processor, so I can't run your code, but the simple *rule of thumb* would be: *stretch* the parent (`.sometables`) to full width (of either `` or some other parent element) and *center* its child content (your two tables). Hence my previous comment. Margins are *never* part of the total width of a child element, causing unwanted extra shifting inside a parent. For child spacing when using `display: grid` use a convenient value for `column-gap` (or shorthand `gap`) in the parent definition (e.g. `.sometables { column-gap: 2em }`). Remove the inline `margin` — Rene van der Lende, Jan 28 '23 at 01:18
@RenevanderLende I'm using Python's Flask Env. to create the website tied to a local database. Hard to reproduce MWE with so many moving parts. Are you able to share the snippet of code? ? What would that chunk of code look like? — 3kstc, Jan 28 '23 at 01:22

Rene van der Lende · Accepted Answer · 2023-01-29T14:48:46.327

As per OP request for code, not checked as it cannot be executed runtime.

Remove references to inline margin and create a basic CSS Grid parent .sometables, which gets stretched to fill its parent (assumably body) and add some convenient spacing between the two child elements (table) with column-gap (where any preferred value will do).

Notice the removal of margin definitions...

Update the CSS grid needs a grid-template-columns definition to show the tables side-by-side instead of stacked on top of eachother. Each table gets 1fr (one fraction) of the total space available.

Make sure to visit Grid by Example, well worth your time.

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

Any pointers if I want to convert `Application
Flagged` to `Application
Flagged` - I can't seem force 200px on the first column... — 3kstc, Jan 29 '23 at 05:15
Use `min-width` instead. You will likely get in trouble using these tables anyway as they are defined as `width 30%` but it may well be that, on browser resize, the `30%` is not wide enough to hold the summed total width of a single row. Then you will have to decide whether to scale down the entire table, or use a different approach like *flexbox* or *CSS grid*. BTW, I removed the 'Convenient...' as that won't happen because of the `width: 30%`. CSS will keep trying to fit each table in a 30% space, no matter how narrow that gets. — Rene van der Lende, Jan 29 '23 at 14:48

How to center align two table side by side?

1 Answers1