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

Populate Select2 with data after making an AJAX call for insertion

Error Occurred: Angular View Not Loading

Display the div only when the radio button has been selected

Improving the style of Google Maps InfoWindows for right-to-left languages

Guide on toggling the display of a div in JQuery

What is the best way to incorporate an exception for the printThis() element?

Browsing using the "touchmove" feature feels extremely laggy

What is the best way to implement CSS rules for a hidden submenu?

Strange gap between element and border on chrome

Bone structure template - optimizing list spacing with CSS

Can we dynamically apply a class to the body depending on the domain in the window's URL?

Maintain the row's position during the sorting process

What is the best way to extract information from the response of a fetch request in JavaScript using Express and Node.js

Is there a way to use Javascript to determine if a string within a JSON object has been altered?

What is the best way to handle multi-dimensional JSON data without keys in JavaScript?

Activate the horizontal scrollbar within each flex item when it is stretched beyond its original width

How come e.target.value always shows the most recent value?

The main view is invoked once more following the successful retrieval of a partial view via an Ajax request

An issue occurred while attempting to retrieve information from the database table

In what way can you establish a boundary for a border?