您不需要使用float。 将“文本”包装在一个跨度中，并让display:内联布局元素。

使用font-weight控制按钮文本。

 <table border="1" class="dataframe table table-sm table-hover">
      <tr>
        <th>
          <span margin-right="4px">Name<span>
          <a class="buttonautowidth" onclick="myFunction()" >Hide/Un-hide</a>
        </th>
    </table>

.buttonautowidth {
  font-weight: 400;
  font-family: Jost;
  text-decoration: none;
  display: inline;
  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;
}

在您的标记中，文本位于按钮之后，这就是它以这种方式显示的原因。 将按钮放置在文本之后，并在它们之间放置任意数量的 ；字符。 然后，使用font-weight:normal代替font-style（用于使文本变为斜体/斜体）。

<table border="1" class="dataframe table table-sm table-hover">
  <tr>
    <th><a class="buttonautowidth" style="float:left;"
    onclick="myFunction()" >Hide/Un-hide</a>&nbsp;&nbsp; Name</th>
...