title: HTML/CSS Getting the correct order of a button and text and other formatting within a table
body: <p>For the table</p>
  
  <pre><code>&lt;table border="1" class="dataframe table table-sm table-hover"&gt;
    &lt;tr&gt;
      &lt;th&gt;Name &lt;a class="buttonautowidth" style="float:left;"
      onclick="myFunction()" &gt;Hide/Un-hide&lt;/a&gt;&lt;/th&gt;
  ...
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/du4WN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/du4WN.png" alt="enter image description here"></a></p>
  
  <ol>
  <li>I would like 'Name' to be followed by a few spaces, then for the button to be placed.</li>
  <li>I would like the button font to be normal (<strong>not</strong> bold - not following the <code>&lt;th&gt;</code>)</li>
  </ol>
  
  <p>css:</p>
  
  <pre><code>.buttonautowidth {
    font-family: Jost;
    float: right;
    text-decoration: none;
    display: block;
    width: auto;
    font-style: normal;
    font-size: 1rem;
    height: 39px;
    background: #1E7F9F;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    border-color: none;
    text-align: center;
    line-height: 1.8;
    color: white;
  }
  </code></pre>
  
  <p>Many thanks for your help</p>