Question

我正在尝试将表中的列集中的内容对齐（居中）。我了解了colgroup和col元素（以前从未使用过）。我知道这些元素具有align属性，但是现在在HTML中，它消失了。

在w3school服务上，我已经看到此注释：

兼容性说明

HTML5不支持的align属性。使用CSS   代替。

CSS语法：<td style="text-align:right">

这是不是意味着删除了列/列组的对齐功能，现在我必须在该列中的每个单元格上放置样式/类元素？那么可以使用什么col和colgroup元素？我已经看到设置background-color仍然有效。还有吗？

P.S。了解功能并立即学习，实际上您已经不能使用它了，这是一个糟糕的体验：/

编辑：按照@JLe的要求，我添加了以下示例代码：

<table>
  <colgroup>
    <col span="2" style="background-color:red; text-align: center;">
    <col style="background-color:yellow">
  </colgroup>
  <thead>
    <tr>
      <td>ISBN</td>
      <td>Title</td>
      <td style="text-align: center;">Price - longer</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3476896</td>
      <td>My first HTML - long title</td>
      <td style="text-align: center;">$53</td>
    </tr>
    <tr>
      <td>5869207</td>
      <td>My first CSS</td>
      <td style="text-align: center;">$49</td>
    </tr>
  </tbody>
</table>

因此，我能够通过单元格样式将黄色单元格的内容居中，但是我问是否有一种方法可以像我对红色列那样将对齐的代码放入colgroup中，但确实可以不起作用。

Answer 1

也许我应该在注释中对此更清楚些，但是不，您不能使用col对其进行文本对齐。按规范，这是行不通的。

您可以做的是使用CSS对齐每个let str = "d d, b b, c c, d d "; let split = str.trim().split(", "); let arr = split.map(str => str.replace(/\s/g, '_')); console.log(arr);元素的不同子元素，因为这有点相同。

tr

要创建更多高级选择器，您可以加入它们，并执行AND语句（或对此进行并集）。因此，要按顺序选择元素2-5，请创建一个选择器，该选择器选择前五个，然后选择一个选择2、3，...，直到最后：

<style>
    tr td:nth-child(-n+2) {
        text-align: center;
    }
</style>
<table>
  <colgroup>
    <col span="2" style="background-color:red; text-align: center;">
    <col style="background-color:yellow">
  </colgroup>
  <thead>
    <tr>
      <td>ISBN</td>
      <td>Title</td>
      <td style="text-align: center;">Price - longer</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3476896</td>
      <td>My first HTML - long title</td>
      <td style="text-align: center;">$53</td>
    </tr>
    <tr>
      <td>5869207</td>
      <td>My first CSS</td>
      <td style="text-align: center;">$49</td>
    </tr>
  </tbody>
</table>

tr td:nth-child(-n+5):nth-child(n+2) {
  background-color: red;
}

在HTML5中对齐表列组中的文本

1 个答案: