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

Question

On my Docusaurus page, I have markup like this that renders the following screenshot:

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

Note that the first table column are wrapped. I prefer them to not be wrapped so that it is easier to read. How do I make the <code> block level such that it 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