Freeze/lock top two row headers

user_268581 0
Viewed 58

In the following table:

enter image description here

I've used the following to lock/freeze the two headers:

<style>
    .tableFixHead { overflow: auto; height: 100px; }
    .tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
</style>

However, when I scroll down, the two headers overlap:

enter image description here

:-)

Here's a codepen for the above example:

https://codepen.io/dharmatech/pen/PopyMzv

Question

Is there a way to get these to not overlap?

Thanks!

Note: I included the tag asp.net-core since this is using the default CSS that comes with it and this is for an ASP.NET Core site.

bootstrap-4 twitter-bootstrap asp.net-core html-table css
1 Answers

You can call the first row and second row independently in CSS and have the first row sticky at top: 0; and the second row sticky at something like top: 35; so they don't overlap.

I added this code to do it:

.tableFixHead thead tr .table-bordered { position: sticky; top: 0; z-index: 1;}
.tableFixHead thead tr:nth-child(2) { position: sticky; top: 35px; z-index: 1;}

Here it is working: https://jsfiddle.net/rpne1as6/1/

Edit: Here's the result directly on SO. I had to remove some of the bottom rows to meet SO's character limit, but you can see both rows stickied here:

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

        .tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead tr .table-bordered { position: sticky; top: 0; z-index: 1;}
          
.tableFixHead thead tr:nth-child(2) { position: sticky; top: 35px; z-index: 1;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index - NutritionTrackerRazorPages</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" href="/">NutritionTracker</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/FoodCategories">Food Categories</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/SimpleFoods">Simple Foods</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/ComplexFoods">Complex Foods</a>
                        </li>


                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/ComplexFoodComponents/IndexGrouped">Complex Food Components</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/FoodRecords">Food Records</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/FoodRecords/IndexGrouped">Food Records Grouped</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/FoodRecords/IndexTabulator">Food Records Tabulator</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/FoodRecords/IndexDevExtreme">Food Records DevExtreme</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/FoodRecords/IndexWebix">Food Records Webix</a>
                        </li>

                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            


<p>
    <a href="/FoodRecords/Create">Create New</a>
</p>



<div 
          style="height: 70vh; overflow: auto;"
     >

    <style>
 }

    </style>

    <table class="table table-sm table-striped-- table-bordered-- tableFixHead">

        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th class="table-bordered" colspan="8">Lipids</th>
                <th class="table-bordered" colspan="7">Carbohydrates</th>
                <th></th>
                <th class="table-bordered" colspan="12">Vitamins</th>
                <th class="table-bordered" colspan="10">Minerals</th>
            </tr>

            <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Food</th>
                <th>Amount</th>



                <th>Cals</th>
                <th>Fat</th>
                <th>Mono</th>
                <th>Poly</th>
                <th>Om3</th>
                <th>Om6</th>
                <th>Sat</th>
                <th>Trans</th>
                <th>Chol</th>
                <th>Carb</th>
                <th>Fiber</th>
                <th>Sol</th>
                <th>Insol</th>
                <th>Starch</th>
                <th>Sug</th>
                <th>Add</th>
                <th>Pro</th>
                <th>B1</th>
                <th>B2</th>
                <th>B3</th>
                <th>B5</th>
                <th>B6</th>
                <th>B12</th>
                <th>Fol</th>
                <th>A</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
                <th>K</th>
                <th>Cal</th>
                <th>Cop</th>
                <th>Iron</th>
                <th>Mag</th>
                <th>Mang</th>
                <th>Pho</th>
                <th>Pot</th>
                <th>Sel</th>
                <th>Sod</th>
                <th>Zinc</th>

                <th></th>

            </tr>
        </thead>

        <tbody>

                        <tr>

                                <td>1/1/2021</td>

                                <td>12:00 PM</td>

                            <td>Avocado (g)</td>
                            <td>50</td>


                            <td>84</td>
                            <td>7.70</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>4.30</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>1.00</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>


                        </tr>
                        <tr>

                                <td></td>

                                <td></td>

                            <td>Basmati Rice (g)</td>
                            <td>300</td>


                            <td>1067</td>
                            <td>3.33</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>240</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>20</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>


                        </tr>
                        <tr>

                                <td></td>

                                <td></td>

                            <td>Ground Beef 80/20 (g)</td>
                            <td>200</td>


                            <td>508</td>
                            <td>32</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>51</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>


                        </tr>
                    <tr class="table-info">
                        <td></td>

                        <td>
                            <a href="/FoodRecords/Create?Date=2021-01-01&amp;Time=2021-01-01%2012%3A00&amp;handler=WithDate">
                                Add
                            </a>
                        </td>

                        <td></td>


                        <td>Meal:</td>


                        <td>1658</td>
                        <td>43</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>244</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>72</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td></td>
                    </tr>
                        <tr>

                                <td></td>

                                <td>6:00 PM</td>

                            <td>Onion (g)</td>
                            <td>150</td>


                            <td>60</td>
                            <td>0.15</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>14</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>1.65</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>


                        </tr>
                        <tr>

                                <td></td>

                                <td></td>

                            <td>Lentils (g)</td>
                            <td>250</td>


                            <td>714</td>
                            <td>3.57</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>164</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>57</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>


                        </tr>
                        <tr>

                                <td></td>

                                <td></td>

                            <td>Basmati Rice (g)</td>
                            <td>350</td>


                            <td>1244</td>
                            <td>3.89</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>280</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>23</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>


                        </tr>
                    <tr class="table-info">
                        <td></td>

                        <td>
                            <a href="/FoodRecords/Create?Date=2021-01-01&amp;Time=2021-01-01%2018%3A00&amp;handler=WithDate">
                                Add
                            </a>
                        </td>

                        <td></td>


                        <td>Meal:</td>


                        <td>2019</td>
                        <td>7.61</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>458</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>82</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td></td>
                    </tr>


        </tbody>
    </table>

</div>



        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - NutritionTrackerRazorPages - <a href="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>

    
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>

user_111111190
Related