如何在不换行的 table 中使用 <code> 标签？

How do I use a <code> tag in a table that does not wrap?

在我的 Docusaurus 页面上，我有这样的标记，呈现以下屏幕截图：

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td><code>organizationName</code></td>
    <td>The GitHub user or organization that owns the repository. In the case of Docusaurus, that would be the "facebook" GitHub organization.</td>
  </tr>
  <tr>
    <td><code>projectName</code></td>
    <td>The name of the GitHub repository for your project. For example, Docusaurus is hosted at https://github.com/facebook/docusaurus, so our project name in this case would be "docusaurus".</td>
  </tr>
</table>

请注意，第一个 table 列已换行。我希望它们不要被包裹起来，这样更容易阅读。如何使 <code> 块级别不换行？

有两种方法可以做到这一点，每一种都有自己的权衡，但都产生相同的结果。

1。使用 <pre>

将 <pre> 插入 <code>。请注意，这不是 HTML 的标准写法。根据规范，<code> 应该在 <pre> 内。这适用于 Docusaurus 网站。

<td><code>organizationName</code></td>

将改为：

<td><code><pre>organizationName</pre></code></td>

2。添加自定义 CSS 目标 <code> [推荐]

添加CSS

code.block {
  white-space: nowrap;
}

并做：

<td><code class="block">organizationName</code></td>

第二种方式更干净，也是我选择的方式。因为我只在 <code> 用作 table 中的第一列时遇到问题，所以我使用了以下 CSS，这也是 Bootstrap website 使用的。

table td:first-child > code {
  white-space: nowrap;
}

这样做的好处是我可以为我的 table 使用 Markdown 语法，而不必向它添加自定义 类:

| `organizationName` | The GitHub user ... |

最终结果