一个或两个表格以 div 为中心

Question

我正在尝试显示一个或两个相邻表格的 div。表格应该居中：

*div****************************************************************************
*                                      Table 1                                 *
*                                   |...|...|...|                              *
********************************************************************************
*div****************************************************************************
*                    Table 2                             Table 3               *
*                 |...|...|...|                       |...|...|...|            *
********************************************************************************

我的 html 看起来像这样：

<div class="all">
  <div class="row"> <!-- row with 1 table in it -->
    <div class="column">
      <table class="centered">
          ...
      </table>
    </div>
  </div>

  <div class="row"> <!-- row with 2 tables in it -->
    <div class="column">
      <table class="centered">
          ...
      </table>
    </div>
    <div class="column">
      <table class="centered">
          ...
      </table>
    </div>
  </div>

</div>

到目前为止，我还没有找到合适的 CSS。我当前的 CSS 看起来像这样：

div.row {
  display: block;
  width: 100%;
}

div.column {
  display: inline;
  margin-left: auto;
  margin-right: auto;
}

table.centered {
  border: 1px;
  border-style: solid;
  margin: 20px;
}

jsfiddle 在这里：jsfiddle

请帮我理解CSS...

Answer 1

不确定这是否是您要查找的内容，但这是我发布的 fiddle。我制作了 table.centered float:left; 然后添加了一个 .left 和 .对第一个和第三个框 class 并简单地给他们一个 margin-top:100px;

https://jsfiddle.net/k9w7yt0f/1/

Answer 2

使用 Flexbox，无论您在每行中添加多少列，它都会起作用：

.row {
    display: flex;
    justify-content: center;
}

jsfiddle

Answer 3

如果您不想使用 flexbox（与旧浏览器不兼容），请从 column 中删除 display: inline;，添加 text-align: center; 并添加 display: inline-table; 到 .centered:

（内联元素可以在其容器上使用 text-align: center; 居中）

div.row {
  display: block;
  width: 100%;
}

div.column {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

table.centered {
  border: 1px;
  border-style: solid;
  margin: 20px;
  display: inline-table;
}

<div class="all">
  <div class="row">
    <div class="column">
      <table class="centered">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="column">
      <table class="centered">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2</td>
            <td>2</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2</td>
          </tr>
        </tbody>
      </table>

      <table class="centered">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>3</td>
            <td>3</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

https://jsfiddle.net/pLccg6w3/

一个或两个表格以 div 为中心

One or two tables centered in a div

html

css

css-tables