Question

我试图将<tr>的每一行（table）居中。我的几行数字不均匀。

以下是我的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

常规标签（相同结构）的例子

＆＃13;

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;;
  }

＆＃13;

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

＆＃13;

仅限INFOS

。你桌子的CSS将是：

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

Answer 2

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

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

＆＃13;

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

＆＃13;

Answer 4

使用 flexbox 的另一种解决方案。您可以使用CSS指定每行的列数。

详细了解flexbox here

＆＃13;

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;
}

＆＃13;

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

＆＃13;

是否可以将每行/ tr放在一个表中？

4 个答案: