Can "position: sticky;" and "overflow-x:auto;" be used together?

Question

Goal: Have a table with sticky headers and able to scroll horizontally when the table is to wide for the window.

Using the code below it is possible to achieve both of these goals, but not at the same time. When div1 has overflow-x: auto; it stops position: sticky; working.

Any ideas on how to have these both work at the same time?

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  text-align: left;
  position: relative;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even){background-color: #f1f1f1}
th {
  background: darkblue;
  color: white;
  position: sticky;
  top: 0;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
#div1 {
  overflow-x: auto;
}

<h2>Table with sticky headers and overflow-x?</h2>

<div id="div1">
  <table>
    <tr>
      <th>Person</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
    </tr>
    <tr>
      <td>A</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>B</td>
      <td>25</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
    </tr>
    <tr>
      <td>C</td>
      <td>33</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>

related: https://stackoverflow.com/a/55601002/8620333 – Temani Afif Nov 22 '20 at 11:31 — Temani Afif, Nov 22 '20 at 11:31

score 0 · Answer 1 · edited Nov 22 '20 at 12:10

0

You are supposed to specify the height of <div id="div1"> such that if the table height exceeds the height of <div id="div1"> the table heads will be sticky. forexample

#div1 {
  overflow-x: auto;
  height:80pt;
}

edited Nov 22 '20 at 12:10

Dharman

30,962
25
85
135

answered Nov 22 '20 at 12:05

ibrahim s

297
1
7

score 0 · Answer 2 · answered Nov 22 '20 at 12:27

I think you did not understand the concept of sticky positions. usually we use sticky position for a part that is horizontal (like your table header) with "overflow-y" not with using "overflow-x". here I posted the code that makes the header of table sticky when the height of contents are more than a defined height ( here for example 100px).

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  text-align: left;
  position: relative;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even){background-color: #f1f1f1}
th {
  background: darkblue;
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

#div1 {
  overflow-y: auto;
  height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table-sticky</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
   <h2>Table with sticky headers and overflow-x?</h2>

<div id="div1">
  <table>
    <tr>
      <th>Person</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
      <th>Longheader</th>
    </tr>
    <tr>
      <td>A</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>58</td>
    </tr>
    <tr>
      <td>B</td>
      <td>25</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>154</td>
    </tr>
    <tr>
      <td>C</td>
      <td>33</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>69</td>
    </tr>
  </table>
</div> 


</body>
</html>

you will notice the concept of "sticky header" if you comment the "position:sticky" line in the css code (for "th" tag).

but if you want that the first column of your table becomes sticky when you scroll horizontally, here is a link that I think is helpful:

http://jsfiddle.net/j9C8R/36/

Can "position: sticky;" and "overflow-x:auto;" be used together?

2 Answers2