When I fix the table header (see code below) at a top position ohter than 0, the body apears above the header when I scroll it.

```css
.test {
  padding-top: 50px;
}

th {
  background-color: orange;
  position: sticky;
  top: 50px;
}
```

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
  <table class="table">
    <thead>
      <tr>
        <th>column1</th>
        <th>column2</th>
        <th>column3</th>
        <th>column4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      </tr>
      <tr>
        <td>13</td>
        <td>13</td>
        <td>13</td>
        <td>13</td>
      </tr>
      <tr>
        <td>14</td>
        <td>14</td>
        <td>14</td>
        <td>14</td>
      </tr>
    </tbody>
  </table>
</div>
```

Now I´m using another TH with background color white before the TH with the column names. The code that i´m using now.

```css
.test {
  padding-top: 0px;
}

th {
  background-color: orange;
  position: sticky;
  top: 50px;
}

.spacer {
  background-color: white;
  position: sticky;
  top: 0px;
  height: 50px;
}
```

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
  <table class="table">
    <thead>
      <tr>
        <th colspan="4" class="spacer"></th>
      </tr>
      <tr>
        <th>column1</th>
        <th>column2</th>
        <th>column3</th>
        <th>column4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>6</td>
        <td>6</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>7</td>
        <td>7</td>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>8</td>
        <td>8</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      </tr>
      <tr>
        <td>13</td>
        <td>13</td>
        <td>13</td>
        <td>13</td>
      </tr>
      <tr>
        <td>14</td>
        <td>14</td>
        <td>14</td>
        <td>14</td>
      </tr>
    </tbody>
  </table>
</div>
```

Is there a better solution? I tried to move the body but it doesn´t work.