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

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 的内容左对齐和居中对齐？

输出应该类似于这样：

- Mihai Alexandru-Ionut

---

你想使用 text-align 来对齐吗？还是你想让它们居中对齐，但最大的单词左对齐？如果是这样，你不能使用表格。 - Pete

取两个单元格，宽度为50％，但保留第一个单元格为空白，使用第二个单元格来放置您的文本。 - Billu

@Pete，我想让它们居中对齐，但是文本内容应该是向左对齐的。 - Mihai Alexandru-Ionut

@Alexandru-IonutMihai，请查看我的下面的答案，我提供了两种解决方案 :) - Savado

Answer 1

如果您希望底部的单元格从中心左对齐，则只需在body单元格中添加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使用单独的行，您需要将所有单词包装在一个内联块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>

- Pete

Answer 2

试试这个：

td {
  width: 50%;
}

    <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>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
          </td>
          <td>
            C 1
          </td>
        </tr>
        <tr>
          <td>
          </td>
          <td>
            Client 2
          </td>
        </tr>
      </tbody>
    </table>

如果您无法添加额外的table-cells，则可以使用padding：

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

    <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>
            C 1
          </td>
        </tr>
        <tr>
          <td>
            Client 2
          </td>
        </tr>
      </tbody>
    </table>

- Savado

Answer 3

td {
  width: 50%;
}
td:last-child {
  border-left:1px solid #333;
}

    <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>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
          </td>
          <td>
            C 1
          </td>
        </tr>
        <tr>
          <td>
          </td>
          <td>
            Client 2
          </td>
        </tr>
      </tbody>
    </table>

- Billu

Answer 4

尝试使用colspan="<要合并的列数>"和rowspan="<要合并的行数>"来合并行或列：

<table>
    <thead>
    <tr>
        <td colspan="2" align="center">Client</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2" width="50%"></td>
        <td>
            C 1
        </td>
    </tr>
    <tr>
        <td>
            Client 2
        </td>
    </tr>
    </tbody>
</table>

- Thuc Nguyen