html - 使用 text-align center 使表格居中

Question

我想让一个表格居中，但是虽然技术上是居中的，但是td内容的不同长度使得表格右边有一个空白区域。

.wrap {
  background: pink;
  padding: 0 50px;
}

table {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  tr {
    td {
      padding: 10px;
      text-align: left;
    }
  }
}

<div class="wrap">
  <table>
    <tbody>
      <tr>
        <td>something here</td>
        <td>row 1 col 2 my </td>
      </tr>
      <tr>
        <td>row 2 col 1 hello world</td>
        <td>react.js</td>
      </tr>
    </tbody>
  </table>
</div>

我可以使 table 和 td 居中对齐，但 td 内容的不同长度使其看起来不均匀。

.wrap {
  background: pink;
  padding: 0 50px;
}

table {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  tr {
    td {
      padding: 10px;
    }
  }
}

<div class="wrap">
  <table>
    <tbody>
      <tr>
        <td>something here</td>
        <td>row 1 col 2 my </td>
      </tr>
      <tr>
        <td>row 2 col 1 hello world</td>
        <td>react.js</td>
      </tr>
    </tbody>
  </table>
</div>

我想要的是 td 的内容应该左对齐并在包装内看起来居中，就像这张图片上的标签(即 Cam 1、Cam 2 等):

Answer 1

您可以分配 width: 50%至 <td>使其宽度相等，例如:

tr td {
  text-align: left;
  width: 50%;
}

.wrap {
  background: pink;
  padding: 0 50px;
}

table {
  width: 100%;
  text-align: center;
}

tr td {
  text-align: left;
  width: 50%;
}

<div class="wrap">
  <table>
    <tbody>
      <tr>
        <td>something here</td>
        <td>row 1 col 2 my </td>
      </tr>
      <tr>
        <td>row 2 col 1 hello world</td>
        <td>react.js</td>
      </tr>
    </tbody>
  </table>
</div>

希望这对您有所帮助!