html - 为什么我的 table 不是水平相邻的？

Question

<分区>

Answer 1

在没有任何 CSS 的情况下单独添加类名不会有任何作用。

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

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

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