Spanning divs и spans - HTML5, CSS и WCAG

Question

У меня есть трехколоночная презентация курсов HTML с использованием div и span.Цель в конце состоит в том, чтобы иметь таблицу, совместимую с 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

Просто сделайте свое странное отображение класса: flex и justify-content: center; чтобы сделать текст center.relace этого кода с вашим кодом.

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

Answer 2

В этом случае вы должны удалить 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>