如何使用 Tailwind 设置类似于 HTML Table 的内容样式

Question

我们有一些 HTML 目前正在以一种表格格式显示数据，但它确实不正确，因为没有 headers，因此应该没有 headers数据。作为我们努力遵守屏幕阅读器网络标准的一部分，我们需要用 div/span 替换这些不正确的表格，但不更改 look/feel。我正在尝试使用 Tailwind 和 Flex 来做到这一点，我认为它应该是可行的，但我总是挂断电话。

最终结果应该是这样的（忽略包围框，只讨论内栏内容）

基本上我需要有 2 列标签右对齐和值左对齐。我有一个 tailwind playground，它设置了内容 here 的基本结构。感谢您的帮助，我是 tailwind 的新手。

Answer 1

这不涉及 Tailwind，但重要的是要说明 —

不能将此信息标记为 table 并且仍符合可访问性最佳做法和网络标准的说法是不正确的。说它会在语义上用 div 和 span 标记得更准确也是不正确的。 div 和 span 没有语义意义，会使依赖辅助技术的用户难以辨别标题和数据之间的关系。

从可访问性和网络标准的角度来看，此信息应使用 table 和 horizontally scoped headers 标记，如下所示（因为它是表格内容，就像你说的那样）：

th { text-align: right; }

<table>
  <caption>Project Information</caption>
  <tr>
    <th scope="row">Company</th>
    <td>ABC, Inc.</td>
  </tr>
  <tr>
    <th scope="row">Project Duration</th>
    <td>10/01/2020 &ndash; 03/07/2022</td>
  </tr>
  <tr>
    <th scope="row">Technology</th>
    <td>Electromagnets</td>
  </tr>
</table>

或作为 description list，在语义上关联术语和相应的描述：

dl {
  display: grid;
  grid-template: 1fr / auto auto;
  justify-content: start;
}
dt {
  font-weight: bold;
  text-align: right;
}
dd {
  margin-left: 1ch;
}

<dl>
  <dt>Company</dt>
  <dd>ABC, Inc.</dd>
  <dt>Project Duration</dt>
  <dd>10/01/2020 &ndash; 03/07/2022</dd>
  <dt>Technology</dt>
  <dd>Electromagnets</dd>
</dl>

如何使用 Tailwind 设置类似于 HTML Table 的内容样式

How to style content similar to a HTML Table with Tailwind

html

tailwind-css