Tips for maintaining table header and ensuring scrollability in table row for the specified table layout

I currently have an HTML table formatted like the one below:

th.th {
  position: fixed;
  background-color: white;
}
th.tl {
  position: fixed;
  background-color: white;
}
<html>

<head>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <table class="report" border="0" cellspacing="0">
    <tbody>
      // Rest of the table content... (omitted for brevity)

  </table>
</body>

</html>

The issue I am facing is that the content within the td elements is not aligning properly with the headers (th). This has resulted in a messy layout. I would like to reformat the HTML table so that the Table Headers stay fixed while the Table Rows remain scrollable. Any assistance on resolving this problem would be greatly appreciated.

javascriptjquerycsshtml

Answer №1

Avoid using inline styles as they can make it difficult to make universal changes to your table. Instead, consider creating a separate CSS style sheet for easier management. Here is an example of how you can apply basic styles to your table.

Check out this example on JSFiddle.

One helpful technique is to alternate the background color of table rows like this:

table tbody tr:nth-of-type(2n) {
    background:#f0f0f0;
}

Answer №2

Take a look at this example I crafted just for you. Hopefully, it meets your expectations.

.container{
width:400px;
}
.scroallable_div{
    height: 120px;
    overflow: scroll;
    overflow-x: hidden;
}
<div class="container">
<table>
<thead>
<tr>
    <th width="120px">First</th>
        <th width="120px">Second</th>
 <th width="120px">Third</th>
        <th width="120px">Fourth</th>
        <th width="120px">Fifth</th>
    </tr>
    
    </thead>
</table>
<div class="scroallable_div">
<table>
            <thead>
            <tr>
                <th width="120px"></th>
                <th width="120px"></th>
                <th width="120px"></th>
                <th width="120px"></th>
            </tr>
            </thead>
    <tbody>
    <tr>
            <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
            
            </tr>
            <tr>
            <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
            
            </tr>
            <tr>
            <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
                    <td>hgdfgdgfd</td>
            
            </tr> 
            (repeated entries omitted for brevity)          
    </tbody>

</table>
</div>
</div>

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 is the best way to retrieve an item if it is a sibling of a specific tag?

My HTML document is quite lengthy, but here's a snippet: <tr> <td data-bind="text:name, css: isActive() ? 'variable-active': 'variable-inactive'" class="variable-active">Vehicle</td> &l ...

pythonhtmlbeautifulsoup

Rearrange the text on an image card using Bootstrap

I am trying to add text over an image in a Bootstrap card, but I am facing some challenges. Here is the code I have: <div className ="container" id="mainContainer"> <div className ="row mt-4"> <div className="col-md-4"> <d ...

cssreactjstwitter-bootstrap

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

I have recently coded an HTML page in order to gain a better understanding of how element removal functions. Code: <html> <head> <script> var childDiv = null; var parent1 = null; var parent2 = null; function ...

javascripthtml

failed to succeed when attempting to yarn install

For the past few days, I've been facing difficulties installing my dependencies using my package.json due to CPP errors. The installation process fails consistently with npm install. 1 error generated. make: *** [Release/obj.target/binding/src/binding ...

javascriptvue.jsnpmnpm-install

What is the best way to manage asynchronous functions when using Axios in Vue.js?

When I refactor code, I like to split it into three separate files for better organization. In Users.vue, I have a method called getUsers that looks like this: getUsers() { this.isLoading = true this.$store .dispatch('auth/getVal ...

javascriptvue.jsvuejs2axios

The vertical alignment of an image within a colorbox is not functioning properly

I recently attempted to center an image vertically using the line-height property in the parent and the vertical-align property in the child element: <div style="height:500px; line-height:500px"> <img src="someimage.jpg" style="vertical-align:m ...

cssvertical-alignment

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

javascripthtmlruby-on-railsruby

Issue with list-style-image not displaying properly in Gmail on Chrome browser

Having trouble incorporating images into bullet lists in my email templates, specifically with Chrome. I prefer using list-style-image over background-image on the li tag. Is there a solution for this issue? ul { list-style-image: url('../images/Bull ...

htmlcssgoogle-chromegmailhtml-email

React-app size has grown larger post-deployment

I recently created my second app clone using React. I have noticed that after deployment, the size of the app increases. Everything looks normal on localhost:3000, but it significantly grows once deployed. Any assistance in resolving this issue would be gr ...

cssnode.jsreactjsfirebasenpm

Shader Material in Three.js causes pixelation glitches when transparency is enabled

Exploring shaders for the first time and utilizing THREE.RawShaderMaterial on multiple meshes. Encountering unusual artifacts with my simple shaders: Vertex shader: precision mediump float; precision mediump int; uniform mat4 modelViewMatrix; uniform ma ...

javascriptopengl-esthree.jswebgl

Ways to display dropdown links in a specific sequence?

Is there a way to display the drop-down links in a specific order? The current order is as follows: Link 1 Link 3 Link 2 Here is the HTML Code: <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class=" ...

htmljquerybootstrap-4drop-down-menu

Selecting a date on a calendar for a particular webpage

I have a standard date picker that is used across 10 different pages. By default, the date picker is set to display the current date. However, on one of the pages (1 out of the 10), there is a link that, when selected, displays a specific future or past da ...

javascriptjqueryasp.netdatepicker

Looking for assistance with an Angular2 post request?

I'm having an issue with a post request to obtain a token granting access to another access token. Each time I attempt to make the post request, I encounter an error stating that the access_token property is trying to read something undefined. It seem ...

javascriptangularpost

Is it possible to achieve a fade effect in material-ui that truly hides the component instead of just disabling its visibility? If so, how can this be accomplished?

Currently, I am utilizing the component provided by material-ui, which can be found at material-ui. <Fade in={!randomizeFlag}> <Grid> <FormControlLabel control={<Switch onChange={this.handleStartValueFlag} & ...

javascriptreactjsmaterial-ui

Obtaining gender information by utilizing checkboxes in Angular 7

I have developed an Angular application that enables users to filter samples by gender using checkboxes. The options include male, female, or both genders selected. Currently, the filtering works for selecting either male or female individually, as well as ...

htmlangulartypescript

What is the best way to resize the mat-form-field mat-chip?

This is the result of my HTML coding https://i.sstatic.net/2KOvk.png I am trying to achieve uniform size for the mat-chip form field similar to the one above. I referenced this location for using chips. I am looking to reduce the size of the chip in the ...

cssangularangular-materialchips

What are the steps to find the average of a group of numbers that are stored in a nested object within an array?

I have a collection of shapes in an object, each assigned with a specific color: const shapeDesign = { designId: 1, shapes: [ { shapeId: 'basic-square', color: { r: 255, g: 255, b: 255 }}, { shapeId: 'basic-circle ...

javascriptarraysbig-o

Insert information into the window before it loads

Exploring the process of opening new windows using JavaScript. var myWindow = window.open(); myWindow.document.write('html'); Is it feasible to inject content into the document before the window fully loads? I aim to include a complete HTML str ...

javascriptwindows

Every time I submit the form, I aim to create a unique random string in the format of 'ZXCVBN'

Is there a way to automatically create a random 6-character string consisting of uppercase letters each time a form is submitted, and then assign this string to the 'code' parameter in the event array within the add-event.comonent.ts file? The g ...

javascriptangulartypescriptrxjsangular9

Filtering data in a table or graph based on the most recent 3 months dynamically

Currently, I am manually filtering the last 3 months using labels: ["JAN", "FEB", "MAR"], I want to dynamically filter the last 3 months every month. How can I achieve this? Here is my TypeScript code HTML <div> <canvas id="myChart" ...

javascripthtmlcssangulartypescript