将表格中的列居中

Question

我试图将表格中的某些列居中，但我遇到了问题。我知道过去您只需将内联样式应用于每个 TD，但必须有更好的方法。

这是一个简单的例子：

.centerText{
	text-align:center;
}

    <table border="1">
      <col>
      <col class="centerText">
      <thead>
        <tr>
          <th>heading1</th>
          <th>heading2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
        </tr>
      </tbody>
    </table>

在该课程中，我试图将文本居中。我知道将 css 应用于 col 将有助于更改列的背景颜色和文本颜色等，但我不确定如何使用它来使列居中。我假设是因为我需要将 td 的内容居中，这可能只是将 TD 元素本身居中；这已经是 100%。 我知道我只能说将 css 应用于此 TR 中的第 5 个 TD，但这似乎很脆弱。

另外，如果您能告诉我如何以这种方式更改列的宽度，则可以加分。我使用了 col 的 width 属性，但在 html 5 中已弃用（尽管它目前仍受支持。

Answer 1

完成，您的课程没有在任何地方使用

tr td:nth-child(2) {
	text-align:center;
}

<table border="1">
  <thead>
    <tr>
      <th>heading1</th>
      <th>heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td >2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

我删除了：

  <col>
  <col class="centerText">

和

.centerText{
    text-align:center;
}

因为 col 没有任何意义，而且您没有关闭标签。

Answer 2

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  text-align: center
}

Answer 3

如果您想将所有 td 内容对齐到中心

将 centerText 类添加到您的表格中

<table class="centerText" border="1">

Answer 4

不完全清楚你想要什么，但是如果你想将某个列的内容居中，你可以使用这个 CSS 规则：

td:nth-child(2) {
    text-align:center;
}

在此示例中，它适用于第二列，但您可以为任何列定义它。它之所以有效，是因为 td 始终是 tr 的子代，因此您可以使用 nth-child 选择器。

td:nth-child(2) {
  text-align: center;
}

<table border="1">
  <col>
  <col class="centerText">
  <thead>
    <tr>
      <th>heading1</th>
      <th>heading2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
    </tr>
  </tbody>
</table>