position: Sticky; does not work

Asked

Viewed 571 times

1

I’m trying to get the thead table keep position: sticky, so always stay at the top of the scroll, but it’s not working and I can’t find a solution.

NOTE: I am using Bootstrap and the class sticky-top didn’t work either.

    html, body {
      height: 100em;
    }

    thead{
        position: sticky;
        position: -webkit-sticky;
        top: 0; 
        background-color: lightblue;
    }
<table border="1">
        <thead>
          <tr>
            <td >CLIENTE</td>
            <td>SEGMENTO</td>
            <td>STATUS</td>
            <td>ATIVAÇÂO</td>
            <td>EC</td>
            <td>ESTADO</td>
            <td>CIDADE</td>
            
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>client</td>
            <td> client</td>
            <td> client</td>
            <td> client</td>
            <td> client</td>
            <td> client</td>
            <td>client</td>
          </tr>
          <tr>
            <td>client</td>
            <td> client</td>
            <td> client</td>
            <td> client</td>
            <td> client</td>
            <td> client</td>
            <td>client</td>
          </tr>
          
        </tbody>
      </table>

css

3 answers

3


Is the position:sticky does not work in the thead, and yes in the th

Follow an example

div {
  height: 100px;
  background: yellow;
  border: 1px solid black;
  overflow-y: scroll;
  width: 250px;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

th {
  position: sticky;
  top: 0;
  background: red;
}
<div>
    <table>
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
    </tbody>
    </table>
  </div>

Even so it seems not to have a good support in the browser

inserir a descrição da imagem aqui

Source: https://caniuse.com/#feat=css-Sticky

1

Sticky will not work in the element thead (nor in the tr) in the Chrome. You will have to use at all td'are in the thead:

html, body {
   height: 100em;
}

thead td{
   position: sticky;
   position: -webkit-sticky;
   top: 0; 
   background-color: lightblue;
}
<table border="1">
  <thead>
    <tr>
      <td >CLIENTE</td>
      <td>SEGMENTO</td>
      <td>STATUS</td>
      <td>ATIVAÇÂO</td>
      <td>EC</td>
      <td>ESTADO</td>
      <td>CIDADE</td>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>client</td>
      <td> client</td>
      <td> client</td>
      <td> client</td>
      <td> client</td>
      <td> client</td>
      <td>client</td>
    </tr>
    <tr>
      <td>client</td>
      <td> client</td>
      <td> client</td>
      <td> client</td>
      <td> client</td>
      <td> client</td>
      <td>client</td>
    </tr>
    
  </tbody>
</table>

  • Work, work... Just use Firefox.. hahahaha

  • rs.. forgot to mention Chrome.

  • The worst thing is that it only works in Firefox and Safari... I can’t even say that this is compatibility. hahaha

0

I believe the only way to achieve this is by breaking the table into two parts. See the example below

body{
  color:#fff; 
  font-family:arial; 
  font-weight:bold; 
  font-size:40px; 
}
.main-container{ 
  max-width:600px; 
  margin:0 auto; 
  border:solid 10px green; 
  padding:10px; 
  margin-top:40px;
}
.main-container *{
  padding:10px;
  background:#aaa; 
}
.main-container * + *{
  margin-top:5px;
}

.main-content{
  min-height:1000px;
}

.main-header{
  position:-webkit-sticky; 
  position:sticky; 
  top:0;
}
<main class="main-container">
  <header class="main-header">
    <table>
      <thead>
<tr>
        <td >CLIENTE</td>
        <td>SEGMENTO</td>
        <td>STATUS</td>
        <td>ATIVAÇÂO</td>
        <td>EC</td>
        <td>ESTADO</td>
        <td>CIDADE</td>
        
      </tr>
</thead>
    </table>
  </header>  
  <div class="main-content">
    <table>
      <tbody>
<tr>
        <td>client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td>client</td>
      </tr>
<tr>
        <td>client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td>client</td>
      </tr>
<tr>
        <td>client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td> client</td>
        <td>client</td>
      </tr>
</tbody>
    </table>
  </div>
</main>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.