有没有一种方法可以在不向每个 td (CSS) 添加 class 的情况下对齐列中的文本？

Question

我一直试图自己解决这个问题，但没有成功。完全披露：我是初学者。

我的目标是 left-align CSS 中 table 最右栏的文本（而其他所有内容，包括所有标题，都居中。）

有没有办法做到这一点而不必为每个 td 分配一个 class？好像有点太重复了...

谢谢！

Answer 1

您可以使用 :last-of-type or :last-child 选择器来实现。

table th, 
table td {
  width: 120px;
  text-align: center;
}

table td:last-of-type {
  text-align: left;
}

<table border="1">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
  </tbody>
</table>

Answer 2

text-align 与 :last-child.

一起工作

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

td:last-child, th:last-child {
  text-align: left;
}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
  </tbody>
</table>

有没有一种方法可以在不向每个 td (CSS) 添加 class 的情况下对齐列中的文本？

Is there a way to align the text in a column without adding a class to each td (CSS)?

css

text-alignment

css-tables