Why aren't my tables next to each other horizontally?

Question

My tables are lining up vertically when I want them to line up horizontally.

I've tried using flex-container, but it doesn't seem to do anything.

<div class = "flex-container">   
    <div>   
        <h2>Types of Cards</h2>
        <div>
            <table></table> 
        </div>
        <div>
            <table></table>
        </div>
        <div>
            <table></table>
        </div>
        <div> 
            <table></table>
        </div>
    </div>   
</div>

Answer 1

Adding a class name alone without any CSS won't do anything.

Here in your HTML, you have each table element inside a div. The default display setting of divs and tables is block, which means that any element after them will be displayed below them, and not next to them.

A possible fix is to set the CSS display to inline, for each table and div containing a table. I added some sample content to better visualize the output:

.table-div {
    display: inline;
}

/*Targets all tables that are inside a div of class table-div*/
.table-div table {
    display: inline;
}

<div>           
<h2>Types of Cards</h2>

    <div class="table-div">
      <table>
          <tr>
              <td>Something1</td>
              <td>Something1</td>
          </tr>
      </table> 
    </div>

    <div class="table-div">
      <table>
          <tr>
              <td>Something2</td>
              <td>Something2</td>
          </tr>
      </table> 
    </div>

    <div class="table-div">
      <table>
          <tr>
              <td>Something3</td>
              <td>Something3</td>
          </tr>
      </table> 
    </div>

    <div class="table-div">
      <table>
          <tr>
              <td>Something4</td>
              <td>Something4</td>
          </tr>
      </table> 
    </div>
</div>