跨越 div 和跨度——HTML5、css 和 WCAG

Question

我使用 div 和 span 对课程进行了三列 HTML 介绍。最后的目标是拥有一个符合 WCAG 标准的 table，但我陷入了一个 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

在这种情况下，您应该删除 semester 范围周围的 row，并删除 role=cell 声明。那么它只是一个 row-group 中的普通旧 span，您可以将 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

让你的奇数 class display: flex 和 justify-content: center;用您的代码制作文本 center.replace 此代码。

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

跨越 div 和跨度——HTML5、css 和 WCAG

Spanning divs and spans -- HTML5, css and WCAG

html

css

wcag