相关疑难解决方法(0)

我在我的页面中有一个表,我使用colgroups以相同的方式格式化此列中的所有单元格,适用于背景颜色和所有.但似乎无法弄清楚为什么文本对齐中心不起作用.它没有将文本对齐居中.

例:

<table id="myTable" cellspacing="5">
    <colgroup id="names"></colgroup>
    <colgroup id="col20" class="datacol"></colgroup>
    <colgroup id="col19" class="datacol"></colgroup>
    <colgroup id="col18" class="datacol"></colgroup>

    <thead>
        <th>&nbsp;</th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

CSS:

#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}

根据文档，我们可以visibility: collapse在<col />元素上使用来折叠或折叠所有关联的列。

但是（在 Chrome 和 Edge 中）我注意到一些元素仍然可见，漂浮在折叠列将占据的区域的某个位置。我可以将其范围缩小到带有position: absolute或 的元素position: relative。这似乎是 Chrome 和 Edge 中的一个错误（均显示此行为）。在 Firefox 中，不会留下意外可见的痕迹。

const toggle = () => {
  const table = document.querySelector("#my-table");
  table.classList.toggle("collapsed");
};

.table.collapsed .collapsible-column {
  visibility: collapse;
}

.oops {
  position: relative;
}

<table id="my-table" class="table">
  <colgroup>
    <col span="2" class="collapsible-column" />
    <col span="2" class="static-column" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">col 1<br /><span class="oops">oops</span></th>
      <th scope="col">col 2</th>
      <th scope="col">col 3</th>
      <th scope="col">col …