Creating a Stylish CSS Table Utilizing DIV Elements: Preventing the Top Row from Scrolling

Utilizing a pure DIV table with the display: table, table-row, table-cell format for styling, I have managed to make the entire table scroll except for the header row. However, I am in search of methods that can prevent the header row (1st row) from scrolling along with the detail rows.

Is there any technique available to specify that the header row should remain fixed and not be affected by scrolling?

Here is an example setup:

    <style>
      .content {overflow: auto;}
      .table { display: table;}
      .row {display: table-row;}
      .cell {display: table-cell;}
    </style>

    ...
<div class="content">
    <div class="table">
      <div class="row">
        <div class="cell">header</div>
        <div class="cell">data</div>
        <div class="cell">row</div>
        <div class="cell">here</div>
      </div>
      <div class="row">
        <div class="cell">...</div>
        <div class="cell">data</div>
        <div class="cell">row</div>
        <div class="cell">here</div>
      </div>
      <div class="row">
        <div class="cell">...</div>
        <div class="cell">data</div>
        <div class="cell">row</div>
        <div class="cell">here</div>
      </div>
    </div>
</div>

My goal is to enable the data rows (rows 2 and beyond) to be scrollable while keeping the header row (row 1) static at the top.

While I understand this could be achieved using HTML etc., I prefer finding a solution through CSS means for specific reasons.

Thank you.

htmlcss

Answer №1

section {
 position: relative;
    border: 1px solid #000;
    padding-top: 37px;
    background: #ff0000;
}

.container {
  overflow-y: auto;
  height: 400px;
  
}
.table{display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey; border-spacing: 0;
    width: 100%;}
.cell , .cell-header{ display:table-cell; border-bottom: 1px solid #eee;
    background: #ddd;
    color: #000;
    padding: 10px 25px;}
.row{ display:table-row;}
.row:first-child{height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;}
.row:first-child div {
    border: none;
}

.cell + .cell {
    border-left: 1px solid #eee;
}
.row:first-child .cell-header div{
 position: absolute;
    background: transparent;
    color: #fff;
    padding: 9px 25px;
    top: 0;
    margin-left: -25px;
    line-height: normal;
    border-left: 1px solid #eee;
}

.row:first-child .cell-header {
  height: 0;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: transparent;
    border: none;
    white-space: nowrap;
}
<section class="">
  <div class="container">
    <div class="table">
      
        <div class="row">
         <div class="cell-header">
            Table attribute name
            <div>Table attribute name</div>
         </div>
         <div class="cell-header">
            Value
            <div>Value</div>
         </div>
         <div class="cell-header">
            Description
            <div>Description</div>
         </div>
        </div>
      
        <div class="row">
          <div class="cell">align</div>
          <div class="cell">left, center, right</div>
          <div class="cell">Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</div>
        </div>

        <div class="row">
          <div class="cell">bgcolor</div>
          <div class="cell">rgb(x,x,x), #xxxxxx, colorname</div>
          <div class="cell">Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</div>
        </div>

        <div class="row">
          <div class="cell">border</div>
          <div class="cell">1,""</div>
          <div class="cell">Specifies whether the table cells should have borders or not</div>
        </div>

        <div class="row">
          <div class="cell">cellpadding</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between the cell wall and the cell content</div>
        </div>

        <div class="row">
          <div class="cell">cellspacing</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between cells</div>
        </div>

        <div class="row">
          <div class="cell">frame</div>
          <div class="cell">void, above, below, hsides, lhs, rhs, vsides, box, border</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the outside borders that should be visible</div>
        </div>

        <div class="row">
          <div class="cell">rules</div>
          <div class="cell">none, groups, rows, cols, all</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the inside borders that should be visible</div>
        </div>

        <div class="row">
          <div class="cell">summary</div>
          <div class="cell">text</div>
          <div class="cell">Not supported in HTML5. Specifies a summary of the content of a table</div>
        </div>

        <div class="row">
          <div class="cell">width</div>
          <div class="cell">pixels, %</div>
          <div class="cell">Not supported in HTML5. Specifies the width of a table</div>
        </div>



 <div class="row">
          <div class="cell">cellpadding</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between the cell wall and the cell content</div>
        </div>
        <div class="row">
          <div class="cell">cellspacing</div>
          <div class="cell">pixels</div>
          <div class="cell">Not supported in HTML5. Specifies the space between cells</div>
        </div>
        <div class="row">
          <div class="cell">frame</div>
          <div class="cell">void, above, below, hsides, lhs, rhs, vsides, box, border</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the outside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">rules</div>
          <div class="cell">none, groups, rows, cols, all</div>
          <div class="cell">Not supported in HTML5. Specifies which parts of the inside borders that should be visible</div>
        </div>
        <div class="row">
          <div class="cell">summary</div>
          <div class="cell">text</div>
          <div class="cell">Not supported in HTML5. Specifies a summary of the content of a table</div>
        </div>
        <div class="row">
          <div class="cell">width</div>
          <div class="cell">pixels, %</div>
          <div class="cell">Not supported in HTML5. Specifies the width of a table</div>
        </div>

Answer №2

.table-row {
    display: table-row;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 100%;
    overflow-y: scroll
 }

top, left, bottom, and width should be adjusted as needed by the user.

Do not forget to include overflow-y: scroll; instead of overflow-y: hidden;

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

Vertical Spacing in Bootstrap 3: Eliminating Gaps Between Divs

I am looking to eliminate the gap between certain div elements and the div positioned below it. This space is created when one div is taller than another in a column. For instance, take a look at this example: http://www.bootply.com/Hc2aO5o4bG Essential ...

phpjqueryhtmlcsstwitter-bootstrap-3

How can you identify dynamically created elements within an AngularJS directive?

I have a directive where I need to target specific DOM elements, some of which are dynamically generated in an ng-repeat loop. If I try to select them directly, I only get the static elements. However, if I delay the selection by, let's say, 500ms, I ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

eliminate whitespace characters within a string

Here is a question that suggests an easy way to remove space characters in a string using R. However, I encountered an issue when trying to remove a space between two numbers (e.g. 11 846.4) while working with the following table: require(XML) require(RCur ...

htmlrregexlinuxstring

Modifying the verbiage in the menu based on location

Could anyone provide some assistance or guidance on how to solve a small issue I'm facing? I would like the text in my navigation to change depending on my position on the site (position1, position2 etc.) Here is a fiddle link for reference: http:// ...

jquerycssnavigationposition

Automatically adjust the tooltip's position if it extends beyond the width of the browser

I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...

jquerycss

A specific class has no border on its left side

Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...

cssborder

Animating content to slide into view in the same direction using CSS transitions

My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...

javascriptjquerycsscss-transitionscss-animations

Implementing JavaScript functionality based on a specific body class

Is there a way to execute this script only on a specific page with a particular body class? For example, if the page has <body class="category-type-plp"> How can I target my script to work specifically for "category-type-plp"? plpSpaceRemove: fun ...

javascripthtmlcss

Retrieve the data stored in the HTML input field prior to transferring it to the SQL database

Currently, I have a form where users input latitude and longitude coordinates, which are then used to create markers and send them to the MySQL database. However, I would like to update it so that users can input an address instead. I attempted to use the ...

htmlmysqlservergeolocation

When using jQuery to enable contenthover on divs, they will now start a new line instead of

I've been working on achieving a layout similar to this, with the contenthover script in action: Mockup Draft Of Desired Look However, the result I'm getting is different from what I expected, it can be seen here. The images are not aligning co ...

javascriptjquerycss

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

cssregexbashcapistranoweb-deployment

Different Line Thickness in Dropdown Menu

Is there a way to adjust line heights in CSS within a drop down menu? I have attempted to change the font sizes of each element, but the new font size does not seem to take effect once an option is selected. Any suggestions would be greatly appreciated! & ...

javascripthtmlcssselectdrop-down-menu

Creating a dual-direction infinite scroll effect with CSS through mouse dragging

I'm currently working on implementing an infinite scroll component for a project. After consulting this tutorial, I've encountered an issue. It seems that I can only achieve infinite scroll in one direction. Whenever I add elements to the leftmo ...

javascriptjqueryhtmlcssscroll

Is the PHP variable receiving a null value by the conclusion of the script?

I'm facing a puzzling issue that I just can't crack. Currently, I'm in the process of developing a blog and I've encountered an anomaly with a cookie-generated variable that holds a post ID. Strangely, when I reach the if(isset) stateme ...

phphtml

Display the user's input value in a tooltip without using jQuery

I am looking to achieve this particular layout design. https://i.stack.imgur.com/p9UTH.jpg I am unsure about how to display the input value in the bubble within this layout. The visibility of the bubble should only be triggered on hover. Below is the cod ...

javascripthtmlcss

Change the <base> element programmatically during server-side rendering

Searching for a way to obtain the base URL for an HTML page, so that relative URL requests from the browser utilize that base. If you are looking for answers, check out this link: Defining root of HTML in a folder within the site root folder When serving ...

javascripthtmlnode.jsexpress

Conceal the ::before pseudo-element when the active item is hovered over

Here is the code snippet I am working with: <nav> <ul> <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li> <li><a href="javascript:void(0)" class="menuitem"> ...

javascriptjqueryhtmlcss

having difficulties in separating the mat-table header

It may seem like a basic question, but I'm having trouble figuring it out. I'm not sure if this requires a CSS change or something else. I'm looking to add a divider between my table header similar to the one highlighted in the screenshot be ...

cssangularangular-material

Customize Bootstrap 4 borders within a row

I am currently facing an issue with my code, where there is a border at the bottom of every row. Click here to view the code Unfortunately, I have noticed that the border at the bottom of each row does not extend across the full width. This occurs even wh ...

cssbuttonbootstrap-4rowoverflow

Issues with LESS rendering on the Django production server

After deploying my Django website to the production server, I noticed that the LESS file is being loaded but not rendered. Strangely, everything works perfectly on the local server. Any insights on why this might be happening? ...

cssdjangohtmlless