Is it possible to create a static table header using only CSS?

Currently, I am utilizing Semantic UI for my CSS framework. Take a look at this fiddle that I have been tinkering with.

Despite scouring the internet for solutions, I am encountering issues with the existing answers available. A common problem seems to be excessive whitespace appearing on the right side of the page.

My goal is to seamlessly integrate this solution with the semantic UI CSS to create a visually appealing layout without any unwanted extra space, but so far, my efforts have been fruitless even after spending significant time on it.

If this compatibility only works with modern browsers, it's acceptable as I plan to use electron anyway.

The following CSS snippet appears necessary, but I am unsure how to adjust it properly to align with my current setup:

tbody, thead tr { display: block; }

tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

Answer №1

The issue with the extra spacing can be traced back to the ui class, which contains media queries that affect the layout on smaller screens. To fix this problem, try adding the class stackable to your table like so:

<table class="ui striped table unstackable">

Additionally, if you intended to have 5 columns instead of 4, make the following adjustments:

tbody td, thead th {
    width: 140px !important;
}

thead th:last-child, tbody tr td:last-child{
    width: 296px !important; /* 140px + 16px scrollbar width */
}

Check out a working example here

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

Combining 2 dates into a single cell format

I'm struggling to change the date format of two dates displayed in one cell using ag-grid. I have tried creating a new function called dateFormatterr with two parameters, but it doesn't seem to work. Below is a snippet of my code and a screenshot ...

Hidden visibility of input field prevents the value from being posted

I have a dropdown menu containing numbers as options. When a user selects a number, I want to display an input box using jQuery based on their selection. However, the issue arises when I try to submit the values of these input boxes as they are not being s ...

Parent style CSS taking precedence over child style due to conflicting rules

Feeling a bit puzzled by another answer on SO... I have two tables, with one nested inside the other. (a table within a table) <table class="master"> <tr> <td>ID</td><td>Name</td><td>Information</td> ...

Is it possible to develop an image that can be zoomed in and out using the mouse

$(document.createElement('img')) .width(imgW) .height(imgH) .addClass('img_full') .attr('src', $(this).attr('data-src')) .draggable() .css({ &a ...

Delete the content on a webpage using an Ajax jQuery request to transfer it elsewhere

Whenever I submit a form using an ajax post request, I receive values from the controller and manipulate the page based on those values. However, my issue is that I need to erase the values from the previous request when the form is submitted again. For in ...

When invoking a Javascript function within an onclick event, make sure to avoid creating a new

There's a function named save in my code that is responsible for saving data from a timer. The Model class looks like this: var Schema = mongoose.Schema; var Timer = new Schema({ Time: {type: Number}, Desc: {type: String}, Doc: {type: S ...

What is the best way to showcase a lengthy webpage similar to that of dzone.com?

Upon visiting dzone.com, it is evident that all the posts are displayed on a single page. As we scroll down the page, older posts are dynamically added to the end of the page while posts at the beginning are potentially removed from view. I am curious abo ...

Is there a way to enclose a portion of text within an element using a span tag using vanilla JavaScript?

Imagine having an element like this: <p id="foo">Hello world!</p> Now, the goal is to transform it into: <p id="foo"><span>Hello</span> world!</p> Is there a way to achieve this using pure vanilla J ...

Arranging Bootstrap 4 cards in a card deck formation

I am currently utilizing reactstrap to configure cards for a particular view. However, I am facing an issue where the last two cards do not have images in the header and I need them to be stacked. My attempted solution was to add a <Col></Col>, ...

Is it possible to retrieve a Video File Upload using PHP?

Imagine if I were to design a form with a basic "File Upload" input, it might look something like this: <div class="elementor-field-type-upload elementor-field-group elementor-column elementor-field-group- ...

The sonar scanner encountered an error while attempting to parse a file using the espree parser in module mode

While executing sonar-scanner on a node project, I encounter a Failed to parse file issue, as shown below: ERROR: Failed to parse file [file:///home/node-app/somedir/index.js] at line 1: Unexpected token './AddCat' (with espree parser in mod ...

conducting a validation using ajax when submitting

Currently, I am exploring the implementation of AJAX validation within a submit() handler for a web form. The AJAX functionality is executed using $.ajax() from jQuery. While setting async: false yields successful results, it triggers a deprecation notice, ...

Tips on styling div elements to act as table cells

Is there a way to style divs with ids 1&2 and have the inner divs act like a table? Specifically, I want the first column to display a label, the second column to display an input field, and the third column to display a button. I attempted to adjust ...

Tips for passing a distinct identifier to the following page when transitioning with Link in NextJS

I need to pass an identifier to the next page when a user navigates. On my homepage, I am fetching an array of data and using the map method to display it in a card-based UI. When a user clicks on a card, they should be taken to another page that display ...

What is the best way to center a form within a jumbotron using CSS?

I'm struggling to replicate a Bootstrap V4 template where I cannot seem to align the form in the center within a jumbotron div. However, all other text is centered as expected. Even though I copied the code from a tutorial, it functions perfectly the ...

Is it possible to easily extract all values associated with a particular key in a nested JSON using JavaScript?

I have a JSON structure that looks like this: [ { cells: [ { id: "1", cellType: 3, widget: { id: 1, description: "myDesc"} }, { id: "2", cellType: 4, widget: { id: 2, description: "myDesc2"} } ] }, { cells: [ { id: "3", c ...

Ensure that each item rendered in a VUE.js v-for loop is distinct and not repetitive

I have obtained a JSON formatted object from a Web API that contains information about NIH funding grants. Each grant provides a history of awards for a specific researcher. My goal is to display only the latest award_notice_date for each unique project ...

Tips for efficiently finding and comparing text within the results generated by a for loop in Angular/Javascript

In my XML data, I have extracted all the tag names using a for loop and some other logic. Now, I am looking to find the word 'author' from the output values that are displayed in the console during the loop. If any of the output values match &apo ...

Retrieve all items pertaining to a specific week in the calendar

I'm trying to obtain a list of week ranges for all data in my MongoDB. When a week range is clicked, only the records for that specific week range should be displayed. By clicking on the week range, the ID of the week (let's say 42, representing ...

Is there a way to switch tabs through programming?

Is there a way to switch between tabs using jQuery or JavaScript when using the tabbed content from ? I have tried using $("tab1").click(); I have created a fiddle for this specific issue which can be found at: https://jsfiddle.net/6e3y9663/1/ ...