是否可以将 table 中的每一行/tr 居中？

Question

我试图将 table 的每一行 (<tr>) 居中。我有几行是奇数。

这是我的例子 HTML:

<!DOCTYPE html>
<html>
<body>

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
  </tr>
</table>

</body>
</html>

此时输出如下图：

但我希望它是这样的:

如果这可以实现，我会很高兴知道如何做到这一点。

Answer 1

<table width="652" height="120" border="0">
  <tr>
    <td width="646" height="57"><table width="649" height="55" border="1">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center" valign="baseline"><table width="528" height="55" border="1">
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        </tr>
    </table></td>
  </tr>
</table>

Answer 2

带有常规标记的示例（相同结构）

div {
  display:table;
  border:solid 1px;
  margin:auto;
  }
p {
  margin:0;
  display:flex;
  justify-content:center;
  }
span {
  margin:3px;
  min-width:1em;
  border:solid 1px;;
  }

<div>
  <p>
    <span> 1 </span>
    <span> 2 </span>
    <span> 3 </span>
    <span> 4 </span>
    <span> 5 </span>
    <span> 6 </span>
    </p>
  <p>
    <span> 7 </span>
    <span> 8 </span>
    <span> 9 </span>
    <span> 10 </span>
    <span> 11</span>
    </p>
  </div>

仅适用于 INFOS。您的 table 的 CSS 将是：

tr {
  display:flex;
  justify-content:center;
}
td {
  min-width:1.5em;
}

Answer 3

您也可以通过嵌套表格来实现。我增加了填充和间距以获得更好的视图。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  .inside_table td{
    border: 1px solid black;
  }
  .table_out{
    border: 1px solid black;
  }
 .table_out td{
    border: 1px solid black;
  }
  </style>
</head>
<body>

  <table class="table_out" cellpadding="10" cellspacing="10">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td colspan="6" style="border:none">
        <table class="inside_table" cellpadding="10" cellspacing="10">
          <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

</body>
</html>

Answer 4

另一个使用 flexbox 的解决方案。您可以使用 CSS.

指定每行的列数

阅读更多关于 flexbox 的内容 here

div.wrapper {
  width: 240px;
  display: flex;
  flex-wrap: wrap;
  flex-flow: row wrap;
  text-align: center;
  justify-content: center;
  border: 2px solid grey;
  padding: 3px;
}
div.wrapper div {
  border: 2px solid grey;
  width: calc((100% - (5px * 2 * 6)) / 6);
  /* 6 - Number of columns in a row */
  /* 5px - 3px margin + 2px border width */
  margin: 3px;
}

<!DOCTYPE html>
<html>

<body>
  <div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
  </div>
</body>

</html>

是否可以将 table 中的每一行/tr 居中？

Is it possible to centre each row / tr in a table?

html

css

html-table

center