Having difficulty creating a stationary header for the table

In an attempt to create a fixed table header with a vertical scroll bar and maintain the size of the header, table data, and overall table width, I wrote some code. I included the table-responsive class to automatically adjust the width for both the th and td.

My question is how can I achieve a vertical scroll with a fixed th while keeping the table data size consistent?

thead th {
  height: 30px;
}

tbody {
  overflow-y: auto;
  height: 190px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<div class="container">
  <table class="table  table-bordered table-responsive">
    <thead>
      <tr>
        <th>Sl No</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Designation</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93e6fdf8fdfce4fdd3f4fef2faffbdf0fcfebdf0fcfe">[email protected]</a></td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User Unkown User </td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="097c676267667e67496e64686065276a6664276a6664">[email protected]</a></td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196c777277766e77597e74787075377a7674377a7674">[email protected]</a></td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f7ece9ecedf5ecc2e5efe3ebeeace1edeface1edef">[email protected]</a></td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3b6ada8adacb4ad83a4aea2aaafeda0acaeeda0acae">[email protected]</a></td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Unkown User</td>
        <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72071c191c1d051c32151f131b1e5c111d1f5c111d1f">[email protected]</a></td>
        <td>Unkown User</td>
        <td>Unkown User</td>
      </tr>
    </tbody>
  </table>
</div>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>table page</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link
         href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
         rel="stylesheet">
      <!-- Theme CSS -->
      <link href="css/style.css" rel="stylesheet"">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Favicon -->
      <link rel="shortcut icon" href="img/favicon.ico">
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <style type="text/css">
         thead{position:fixed;}
         thead th {
         height: 30px;
         z-index:9999;
         background:#fff;
         }
         tbody {
         overflow:hidden;
         overflow-y: auto;
         height: 190px;

         }
      .myCustomTable .col-md-1{
          width:9%;
       }
     .myCustomTable .col-md-2{
          width:16%;
       }
     .myCustomTable .col-md-3{
          width:25%;
       }
      </style>
   </head>
   <div class="container">


<table class="table table-bordered table-responsive myCustomTable" >
    <thead>
        <tr class="row">
            <th class="col-md-1">Sl No</th>
            <th class="col-md-2">Full Name</th>
            <th class="col-md-3">Email</th>
            <th class="col-md-3">Designation</th>
            <th class="col-md-3">Department</th>
            </tr>
        </thead>
        <tbody>
           <!-- Several rows of user information -->
            
        </tbody>
    </table>
</div>
   </body>
</html>

Answer №2

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>table</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link
         href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
         rel="stylesheet">
      <!-- Theme CSS -->
      <link href="css/style.css" rel="stylesheet"">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <!-- Favicon -->
      <link rel="shortcut icon" href="img/favicon.ico">
      <script
         src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
      <style type="text/css">
         table{
            width: 800px;
            position: relative;
         }
         thead {
         position: absolute;
         overflow-y: auto;
         overflow-x: hidden;
         height: 50px;
         max-width: 100%;
         top: 0;
         }
         tbody {
         max-width: 100%;
         position: absolute;
         top: 40px;
         height: 10em;
         overflow-y:scroll;
         display:block;
         }
      </style>
   </head>
   <div class="container">


<table class="table  table-bordered table-responsive" >
    <thead>
        <tr>
            <th>Sl No</th>
            <th>Full Name</th>
            <th>Email</th>
            <th>Designation</th>
            <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Mysterious User</td>
                <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e1b0005000119002e09030f0702400d0103400d0103">[email protected]</a></td>
                <td>Unknown User</td>
                <td>Unknown User</td>
            </tr>
  <tr>
                <td>1</td>
                <td>Mysterious User Unkown User  </td>
                <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7702191c1918001937101a161e1b5914181a5914181a">[email protected]</a></td>
                <td>Unknow User</td>
                <td>Unknown User</td>
            </tr>
  <tr>
                <td>1</td>
                <td>Mysterious User</td>
                <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a4bfbabfbea6bf91b6bcb0b8bdffb2bebcffb2bebc">[email protected]</a></td>
                <td>Unkwon User</td>
                <td>Unknow User</td>
            </tr>
  <tr>
                <td>1</td>
                <td>Mysterious User</td>
                <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bda6a3a6a7bfa688afa5a9a1a4e6aba7a5e6aba7a5">[email protected]</a></td>
                <td>Unknwn User</td>
                <td>Unknown User</td>
            </tr> <tr>
                <td>1</td>
                <td>Mysterious User</td>
                <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedbc0c5c0c1d9c0eec9c3cfc7c280cdc1c380cdc1c3">[email protected]</a></td>
                <td>Unknown User</td>
                <td>Unkonw User</td>
            </tr>  <tr>
                <td>1</td>
                <td>Mysterious User</td>
                <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f4a5154515048517f58552t151o14161558155215">[email protected]</a></td>
                <td>Unknow User</td>
                <td>Unknown User</td>
            </tr>
            
        </tbody>
    </table>
</div>
   </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my buttons to not line up properly?

My buttons are refusing to line up horizontally for some unknown reason. I can't figure out what the issue is. They are all set to display as inline-block elements. The first image shows a website with the correctly aligned buttons, while the second o ...

htmlcss

Create a separate server session specifically for handling an ajax request?

Currently, I am working with a collection of PHP server-side scripts that manage user session state by utilizing PHP sessions extensively for authenticated users. For the client side within a mobile application and using Jquery ajax, I am striving to esta ...

phpjavascriptjqueryajaxsession

Connecting to a fresh dynamic route does not impact the getInitialProps data

I am struggling to understand the difference between componentDidMount and getInitialProps. Despite my best efforts to research, I still can't figure out when to use each one in my specific case. Let me give you some context. I have a page called /co ...

javascriptreactjsnext.js

Tips for creating two divs next to each other with inline-block?

Is there a way to align the divs side by side and have the 'contentwrapper' div responsive to the resizing of the browser window? HTML <div id="maincontainer"> <div id="leftcolumn">&nbsp;</div> <div id="contentwrapper ...

htmlcss

Arrows on the button are unresponsive and there seems to be an incorrect number of

I've been working on a project by combining various examples I found online. I'm puzzled as to why it's displaying all the buttons at once instead of just one per page, and why the number of visible buttons decreases by one with each right c ...

javascripthtmlcss

Executing a JavaScript function following a PHP form submission

I've been struggling to understand why the checkDates() function is not being called after submitting the form. The checkForm() JS function works perfectly fine, but for some reason, checkDates() doesn't seem to work. I even tried moving it above ...

javascriptphpjquery

The call function in Tween.js fails to execute after adding an EventListener

I encountered an issue while using tween.0.6.2. The following code snippet (borrowed from the tween.js Getting Started page and slightly simplified) works perfectly: createjs.Tween.get(circle) .to({x: 400}, 1000, createjs.Ease.getPowInOut ...

javascripthtmltween

What is the best way to ensure that the output responds to the function?

I have a total value output that needs to decrease when a checkbox is unchecked. The current function I have for unchecking the box is not working as expected. Jquery Total value calculation: $(document).ready(function() { var initialTotal = 720; $(" ...

jqueryhtml

Open the JSON file and showcase its contents using Angular

I am attempting to read a JSON file and populate a table with the values. I've experimented with this.http.get('./data/file.json') .map(response => response.json()) .subscribe(result => this.results =result, function(error) ...

javascriptjsonangulartypescript

Error: Unable to locate module: 'fs' in Next.js

import nookies from 'nookies'; import { firebaseAdmin } from "../firebaseAdmin"; import { TChildren } from "../types/app/app.types"; interface Props { children: TChildren; } export default function ProtectedRoute(props ...

javascriptreactjsnext.js

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

Confusion arises from the code for processing an Ajax redirect

I finally succeeded in incorporating an Ajax call into my code, but I'm a bit puzzled about how to redirect after the call is made. Below is an example of my script, developed using CodeIgniter: <script type="text/javascript"> function myFunc ...

javascriptphpjqueryajaxcodeigniter

"Conducting API calls in NextJS: Why is Axios/Fetch returning incorrect results when using the post

I'm trying to use a post method on an API, but for some reason when I call the function it posts to the wrong path of the API. Here is the script I am using for the post: //Creating Order const createOrder = async (data) => { try { co ...

javascriptreactjsapinext.js

What is the superior choice for developing a card game: creating it using SVG and the kinetic.js library or utilizing the oCanvas library

When it comes to creating a card game, which platform is more suitable: SVG or canvas using kinetic.js or oCanvas library? In terms of performance, event handling, and object tracking, which option would be more efficient? Additionally, if there is a bet ...

htmlhtml5-canvas

What is the method to retrieve JSON data with data['file.file']?

When trying to query my data using var x = data.file.file;, I encountered an issue where data['file.file'] fails. Is there a way to access this data without having to split the string and walk recursively through it? ...

javascriptjson

A guide to duplicating an image and placing multiple copies in various random locations

I'm trying to add multiple copies of an image to my webpage using create.js. I want each copy to be placed in a random position. I attempted to use the jQuery clone() method, but it didn't work as expected. function handleComplete(e) var _ob ...

javascriptjquerycreatejs

Sidebar navigation text shifting during transition

I attempted to modify the CSS and JavaScript, but unfortunately, it had no effect and actually caused more issues. I adjusted the position and display properties in the CSS, but it seems that wasn't the root of the problem. If anyone could offer assis ...

javascripthtmlcssbootstrap-5

Display a confirmation modal before triggering $routeChangeStart in AngularJs, similar to the window.onbeforeunload event

When a user chooses to stay on the page as the route starts to change, the original route remains intact but the form directives are reloaded. This results in the loss of all checkbox and input values, resetting them to their defaults. If a user closes th ...

javascriptangularjsonbeforeunloadngroute

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...

javascripthtmljspjquerystruts

Incompatibility issues with SVG gooey effect on the most recent FireFox update

My Gaussian blur is not functioning correctly with colors other than black. It works fine on Chrome, but I have yet to test it on Safari. https://i.sstatic.net/iJFUj.png I've provided an example on jsFiddle: HTML: <div> <div class="bigLog ...

htmlcssfirefoxsvg