Question

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

这是一个简单的例子：

＆＃13;

.centerText{
	text-align:center;
}

＆＃13;

    <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>

＆＃13;

通过该课程，我试图将文本集中在里面。我知道将col应用于col将用于改变列和文本颜色等的背景颜色，但我不确定如何使用它来使列居中。我假设因为我需要将td的内容居中，这可能只是将TD元素本身居中;这已经是百分之百。我知道我可以说在这个TR中将css应用到第5个TD，但这似乎很脆弱。

此外，如果您可以告诉我如何以这种方式更改列的宽度，还可以获得奖励积分。我使用col的width属性，但在html 5中已弃用（即使它目前仍然受支持。

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我删除了：

  <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>

将列中心放在表格中

4 个答案: