为什么我的桌子不水平并排放置？

Question

当我希望它们水平排列时，我的桌子垂直排列。

我尝试过使用flex-container，但似乎没有任何作用。

<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

仅添加没有CSS的类名将无济于事。

在HTML中，每个table元素都位于div中。 div和表的默认display设置为block，这意味着它们之后的任何元素都将显示在它们下面，而不是在它们旁边。

一个可能的解决方法是将每个表和包含一个表的div的CSS display设置为inline。我添加了一些示例内容，以更好地可视化输出：

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