html - 如何将表格单元格居中左对齐？

Question

我有一个简单的表结构。

table > tbody > tr > td{
  text-align:center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
      <thead>
        <tr>
          <td>Client</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-md-4">
            C 1
          </td>
        </tr>
        <tr>
          <td class="col-md-4">
            Client 2
          </td>
        </tr>
      </tbody>
    </table>

问题是:如何对齐 td-s 内容left 和center。 ？

输出应该是这样的:

Answer 1

如果您希望下部单元格从中心左对齐，则只需将 padding-left 50% 添加到您的主体单元格

.table tbody td {
  padding-left: 50%;
  text-align;
  left;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
  <thead>
    <tr>
      <td>Client</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-md-4">
        C 1
      </td>
    </tr>
    <tr>
      <td class="col-md-4">
        Client 2
      </td>
    </tr>
  </tbody>
</table>

如果您希望它们以最大的单词为中心，然后左对齐，您不能为 tbody 设置单独的行，您需要将所有单词包装在一个内联 block div 中:

.col-md-4 {
  text-align: center;
}

.inline-block {
  display: inline-block;
  text-align: left;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
  <thead>
    <tr>
      <td>Client</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-md-4">
        <div class="inline-block">
          C 1<br> Client 2
        </div>
      </td>
    </tr>
  </tbody>
</table>