Alignment of the table with a fixed header and scrollable body

Question

Alignment of the table with a fixed header and scrollable body

Currently, I am experiencing an issue with aligning a table. My aim is to have a fixed header and a scrollable body for the table. To do this, I have aligned the table header and body using:

display: table-header-group

For the table body, I have applied the following CSS properties:

<tbody class="scrollablebody">

.scrollablebody {
  display: block;  // if I remove this, the scroll bar does not appear, but I need it 
  overflow-y: auto;  
  max-height: 200px;
}

However, when I apply the above CSS to the table body, all alignments become disturbed. Is there a way to achieve this without messing up the alignment? Thank you in advance.

[jsfiddle] (http://jsfiddle.net/saurabh07/7aj5fxmb/)

javascript jquery html css

Answer 1

Answer №1

Just assigned unique identifiers to each table row element.

HTML

<tr>
                <td id="name">Eve</td>
                <td id="lastname">Smith</td>
                <td id="id">0056</td>
                <td id="country">Canada</td>
                <td id="branch">Toronto</td>
                <td id="location">Toronto CN</td>
                <td id="cardno">98672</td>
                <td id="percent">75%</td>
            </tr>

CSS

#name {
    width: 13.2%;
}
#lastname {
    width: 12.9%;
}
#id {
    width: 22.8%;
}
#country {
    width: 10.5%;
}
#branch {
    width: 9.3%;
}
#location {
    width: 10.9%;
}
#cardno {
    width: 10.5%;
}
#percent {
}

Answer 2

Just assigned unique identifiers to each table row element.

HTML

<tr>
                <td id="name">Eve</td>
                <td id="lastname">Smith</td>
                <td id="id">0056</td>
                <td id="country">Canada</td>
                <td id="branch">Toronto</td>
                <td id="location">Toronto CN</td>
                <td id="cardno">98672</td>
                <td id="percent">75%</td>
            </tr>

CSS

#name {
    width: 13.2%;
}
#lastname {
    width: 12.9%;
}
#id {
    width: 22.8%;
}
#country {
    width: 10.5%;
}
#branch {
    width: 9.3%;
}
#location {
    width: 10.9%;
}
#cardno {
    width: 10.5%;
}
#percent {
}

Alignment of the table with a fixed header and scrollable body

Answer №1

Similar questions

How can I use JavaScript to create a drop-down menu that only appears after selecting the previous one?

Exploring the use of the "++" operator in Regular

When downloading text using Angular, the file may not display new line characters correctly when opened in Notepad

Why is the child's CSS hover not functioning when the body has an event listener attached to it?

Revamp MUI class names with React Material UI's innovative randomization and elimination

The unexpected behavior in React's reconciliation process: What is causing the state to remain unchanged?

The .keypress() function isn't behaving as expected

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

Using a ternary condition within the ngClick directive

Homepage featuring a stacked image background similar to Kickstarter

jQuery in action on certain pages, while not functioning on others

What are the best ways to utilize getElementById in React?

Using Ajax without implementing JavaScript

Tips for receiving accurate HTML content in an Ajax request

From Jquery to Python: Converting Query Dict in Django

Is there a way to make the first Image Element within the div automatically clickable?

Incorporating DefinitelyTyped files into an Angular 2 project: A step-by-step guide

Generating an HTML table using data from a specified URL source

Overriding a shared module service in Angular from a separate module: A step-by-step guide

What are the steps to make a dropdown menu using only HTML and CSS?