html - 我如何使用 tag in a table that does not wrap?

Answer 1

There are two ways of doing it, each with its own tradeoffs but both produce the same result.

1. Use <pre>

Insert <pre> into the <code>. Note that this is not the standard way of writing HTML. According to the spec, the <code> should be inside <pre> instead. This works for a Docusaurus site.

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

would instead be written as:

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

2. Add custom CSS targeting <code> [RECOMMENDED]

Add the CSS

code.block {
  white-space: nowrap;
}

and do:

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

The second way is cleaner and what I settled on. Since I only faced the problem when <code> was used as the first column in a table, I used the following CSS, which is also what Bootstrap website uses.

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

The benefit of doing the above is that I can use Markdown syntax for my table and I do not have to add custom classes to it:

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

Final Result