跨越div和spans-HTML5，css和WCAG

Question

我有一个使用div和span的三列HTML演示课程。最后的目标是要有一个符合WCAG的表，但是我陷入了CSS问题...

这是我的代码：

<div role="table" aria-label="TABLE-NAME" aria-describedby="TABLE-NAME_DESCRIPTION"><div id="TABLE-NAME_DESCRIPTION">WCAG HTML, hopefully</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader">Course Number</span><span role="columnheader">Description</span><span role="columnheader">Prerequisite</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span class="semester" role="cell">Fa1l, 1st Year</span>
</div></div>
<div role="rowgroup">
<div role="row">
<span role="cell">BUSI3333</span><span role="cell">Business 3333</span><span role="cell">Business 3332</span>
</div>
</div>
</div>

如何使学期居中显示？

目前，我正在使用的CSS是：

.annotate {
  font-style: italic;
  color: #366ed4;
}
.semester {
    text-align: center;
    font-weight: bold;
    width: 100%;
}

[role="table"] {
  display: table;
}

[role="table"] > div[id] {
  display: table-caption;
  font-style: italic;
}

[role="table"] [role="row"] {
  display: table-row;
}

[role="table"] [role="cell"],
[role="table"] [role="columnheader"] {
  display: table-cell;
  padding: 0.125em 0.25em;
  width: 8em;
}

[role="table"] [role="columnheader"] {
  font-weight: bold;
  border-bottom: thin solid #888;
}

[role="table"] [role="rowgroup"]:nth-child(odd) {
  background-color: #ddd;
}
</style>

是的，我可以将学期放在中间跨度，而两侧都为空，但这似乎是错误的。

Answer 1

在这种情况下，您应该删除row范围周围的semester，并删除role=cell声明。然后，它只是span中的普通旧row-group，您可以将display:inline-block添加到semester CSS中以使其居中。像这样：

.annotate {
  font-style: italic;
  color: #366ed4;
}
.semester {
  display:inline-block;
  text-align: center;
  font-weight: bold;
  width: 100%;
}

[role="table"] {
  display: table;
}

[role="table"] > div[id] {
  display: table-caption;
  font-style: italic;
}

[role="table"] [role="row"] {
  display: table-row;
}

[role="table"] [role="cell"],
[role="table"] [role="columnheader"] {
  display: table-cell;
  padding: 0.125em 0.25em;
  width: 8em;
}

[role="table"] [role="columnheader"] {
  font-weight: bold;
  border-bottom: thin solid #888;
}

[role="table"] [role="rowgroup"]:nth-child(odd) {
  background-color: #ddd;
}

<div role="table" aria-label="TABLE-NAME" aria-describedby="TABLE-NAME_DESCRIPTION"><div id="TABLE-NAME_DESCRIPTION">WCAG HTML, hopefully</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">Course Number</span><span role="columnheader">Description</span><span role="columnheader">Prerequisite</span>
    </div>
  </div>
  <div role="rowgroup">
    <span class="semester">Fa1l, 1st Year</span>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">BUSI3333</span><span role="cell">Business 3333</span><span role="cell">Business 3332</span>
    </div>
  </div>
</div>

Answer 2

只需让您的奇数类显示：flex和justify-content：居中；使文本居中。将此代码替换为您的代码。

[role="table"] [role="rowgroup"]:nth-child(odd) {
    background-color: #ddd;
    display: flex;
    justify-content: center;
}

.annotate {
  font-style: italic;
  color: #366ed4;
}

.semester {
  text-align: center;
  font-weight: bold;
  width: 100%;
}

[role="table"] {
  display: table;
}

[role="table"]>div[id] {
  display: table-caption;
  font-style: italic;
}

[role="table"] [role="row"] {
  display: table-row;
}

[role="table"] [role="cell"],
[role="table"] [role="columnheader"] {
  display: table-cell;
  padding: 0.125em 0.25em;
  width: 8em;
}

[role="table"] [role="columnheader"] {
  font-weight: bold;
  border-bottom: thin solid #888;
}

[role="table"] [role="rowgroup"]:nth-child(odd) {
  background-color: #ddd;
  display: flex;
  justify-content: center;
}

<div role="table" aria-label="TABLE-NAME" aria-describedby="TABLE-NAME_DESCRIPTION">
  <div id="TABLE-NAME_DESCRIPTION">WCAG HTML, hopefully</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">Course Number</span><span role="columnheader">Description</span><span role="columnheader">Prerequisite</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span class="semester" role="cell">Fa1l, 1st Year</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">BUSI3333</span><span role="cell">Business 3333</span><span role="cell">Business 3332</span>
    </div>
  </div>
</div>