JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<p>
  I want the
  <code>&lt;pre&gt;hello&lt;/pre&gt;</code>
  in the table below, to have there width fixed by
  their content, not by the width of the cell they are in.
</p>


<table style="width: 400px;">
  <tr>
    <td></td>
    <th colspan="2">hello</th>
  </tr>
  <tr>
    <td></td>
    <th>one</th>
    <th>two</th>
  </tr>
  <tr>
    <td></td>
    <td colspan="2">
      <pre>hello</pre>
    </td>
  </tr>
  <tr>
    <th>hello</th>
    <td>
      <pre>hello</pre>
    </td>
    <td>
      <pre>hello</pre>
    </td>
  </tr>
  <tr>
    <th>hello</th>
    <td colspan="2">
      <pre>hello</pre>
    </td>
  </tr>
  <tr>
    <th>Comments</th>
    <td>one</td>
    <td>two</td>
  </tr>
</table>

CSS

table {
       border-collapse: collapse;
       border: 2px solid rgb(200, 200, 200);
       letter-spacing: 0px;
       font-size: 1rem;
     }

     td,
     th {
       border: 1px solid rgb(190, 190, 190);
       padding: 0px 0px;
     }

     th {
       background-color: rgb(235, 235, 235);
     }

     td {
       text-align: center;
     }

     tr:nth-child(even) td {
       background-color: rgb(250, 250, 250);
     }

     tr:nth-child(odd) td {
       background-color: rgb(245, 245, 245);
     }

     caption {
       padding: 0px;
     }

     pre {
       font-family: monospace;
       font-size: 15px;
       background-color: honeydew;
       margin: 15px;
       padding: 5px;
       border: 1px solid gray;
       white-space: pre-wrap;
       word-break: keep-all;
       text-align: center;
     }