position: Sticky together with overflow;

Question

position: Sticky together with overflow;

Asked 4 years, 12 months ago

Viewed 124 times

1

there is a way to make position: sticky and overflow-x: auto work together, without setting values of height? In that structure I set overflow-x: auto in my class .scroll, mine position: sticky tag th but when removing the overflow the same works normally. I researched on and found that only work together with value of height arrow. Is there any other way to make the two properties work together? If yes only with css is possible? or do I need help with javascript? I’m using Angular7, if you need javascript, it’s possible without Jquery?

table {
    min-width: 250px;
    border-collapse: separate; 
    border-spacing: 0;
    margin-right: 5px;
}

thead th {
    position: sticky;
    top: 0;
    background-color: #c3ac6c;
}

th {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
    text-align: center;
    padding: 4.5px;
}

tbody tr:nth-child(even) {
    background: #efefef;
    overflow: hidden;
}

tbody tr:nth-child(even):hover {
    background-color: #ffff99;
}

td {
    border-bottom: 1px solid;
    border-right: 1px solid;
    padding: 4.5px;
    text-align: center;
}

tr{
    min-height: 25px;
}

th:first-child,
td:first-child {
    border-left: 1px solid;
}

tr:hover {
    background-color: #ffff99;
}

.fixed{
    position: sticky;
    left: 0;
    padding: 0 5px 0 5px;
    background-color: #fafafa;
    z-index: 3;    
  width: 100%
}

.scroll {
  display: flex;
  justify-content: space-between;
  width: 800px;
  overflow-x: auto; 
}

<div class="scroll">
  <div class="fixed">
    <table>
      <thead>
        <tr>
          <th>1</th>        
          <th>2</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td> <td>2</td> 
        </tr>
           <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>
        <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>
      </tbody>
    </table>
  </div>
  <table>
      <thead>
        <tr>
          <th>1</th>        
          <th>2</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td> <td>2</td> 
        </tr>
           <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>
        <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>
      </tbody>
    </table>
    
  <table>
      <thead>
        <tr>
          <th>1</th>        
          <th>2</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td> <td>2</td> 
        </tr>
           <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>
        <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>
      </tbody>
    </table>
    
  <table >
      <thead>
        <tr>
          <th>1</th>        
          <th>2</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td> <td>2</td> 
        </tr>
           <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>
        <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>   <tr>
          <td>1</td> <td>2</td> 
        </tr>
      </tbody>
    </table>
  
</div>

Dude, I don’t get it, do you want this? https://imgur.com/JDxZvSW ? I was a little confused by what final result you expect...

– hugocsl

2019/07/05 at 17:48
That’s right, but I can’t get to that result without setting height, I need my table to have the size of lines coming from the bank, with left table fixed, and headers fixed horizontally and vertically.

– OtavioCapel

2019/07/05 at 17:51

1 answer

Browser other questions tagged javascript css css3

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

by hugocsl • **65,517** points · Answer 1 · 2019-07-05T18:08:34+00:00

Dude but if you don’t set a size for your table like you want it to have scroll? If vc will not set the table size you need to set the height of some element that the table will be in, even if it is the body.

I made that example where the div.scroll is 100% of the height and width of the body. I used max-width and max-heigt, then the scroll will only appear if the content is larger than the container Dad, if it’s Mom, it doesn’t show up scroll

Here I decrease the number of elements because of the character limitation of the Stackoverflow Snippet, but you can test there with more content to see how it looks

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        margin: 0;
    }

    table {
        min-width: 250px;
        border-collapse: separate;
        border-spacing: 0;
        margin-right: 5px;
    }

    thead th {
        position: sticky;
        top: 0;
        background-color: #c3ac6c;
    }

    th {
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-right: 1px solid;
        text-align: center;
        padding: 4.5px;
    }

    tbody tr:nth-child(even) {
        background: #efefef;
        overflow: hidden;
    }

    tbody tr:nth-child(even):hover {
        background-color: #ffff99;
    }

    td {
        border-bottom: 1px solid;
        border-right: 1px solid;
        padding: 4.5px;
        text-align: center;
    }

    tr {
        min-height: 25px;
    }

    th:first-child,
    td:first-child {
        border-left: 1px solid;
    }

    tr:hover {
        background-color: #ffff99;
    }

    .fixed {
        position: sticky;
        left: 0;
        padding: 0 5px 0 5px;
        background-color: #fafafa;
        z-index: 3;
        width: 100%
    }

    .scroll {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
</style>
</head>

<body>


    <div class="scroll">
        <div class="fixed">
            <table>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                </tr>
            </thead>

            <tbody>

                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
            </tbody>
        </table>



    </div>

    <script>

    </script>

</body>

</html>