Заголовок исправления таблицы - PullRequest
Новая
       67

Заголовок исправления таблицы

0 голосов
/ 05 мая 2020

Когда я фиксирую заголовок таблицы (см. Код ниже) в верхней позиции ниже 0, тело появляется над заголовком, когда я прокручиваю его. 

.test {
  padding-top: 50px;
}

th {
  background-color: orange;
  position: sticky;
  top: 50px;
}
<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>

Теперь я использую другой TH с белым цветом фона перед TH с именами столбцов. Код, который я сейчас использую. 

.test {
  padding-top: 0px;
}

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

.spacer {
  background-color: white;
  position: sticky;
  top: 0px;
  height: 50px;
}
<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>

Есть ли лучшее решение? Я попытался переместить тело, но это не помогло.

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

Вместо заполнения используйте псевдоэлемент, чтобы создать это пространство и сделать его липким: 

.test {
  position:relative;
}
.test::before {
 content:"";
 display:block;
 background:#fff;
 position:sticky;
 z-index:3;
 top:0;
 height: 50px;
}

th {
  background-color: orange;
  position: sticky;
  top: 50px;
}
<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>
0 голосов
/ 05 мая 2020

Добавляю позицию относительно класса таблицы и исправляю 

.test {
  padding-top: 0px;
}

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

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

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