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

What is the best way to include a search box in the mobile view between the brand and menu toggle?

Is there a way to place the search bar between the brand and menu toggle on the mobile view without it appearing on a separate row either under or over the navbar? I've been trying to override some Bootstrap CSS but haven't found a solution yet. ...

htmlcsstwitter-bootstrap

What strategies can be used to scale up a website's images in proportion to their page views or traffic?

The situation: On my simple HTML website, I have a group of images placed side by side. Each image is connected to a specific article, and when you hover over the image, a detailed description of the linked article pops up in the center of the page. The o ...

javascripthtmlresponsive-designpageviewsimage-size

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

Guide on converting a JSON containing nested JSONs into an HTML table

Currently, I am working with a JSON data structure that contains nested dictionaries. My goal is to create an HTML table where each top-level key serves as a column in the table. The inner key-value pairs should be represented as a single text within cells ...

javascripthtmljsondynatable

Dynamic column group in Datatable - toggle visibility based on user selection

In my application, I am utilizing Jquery datatable with a table that includes the following columns: Name, Office, A1, B1, Diff1, A2, B2, Diff2, A3, B3, Diff3, A4, B4, Diff4 Additionally, there is a select box containing the options: 1. All 2. Diff1 3. D ...

javascriptjqueryhtmldatatabledatatables

Implementing a translucent overlay onto a specific HTML section using sidebar.js/jQuery

Searching for a way to enhance the functionality of my website using Sidebar.js, I came across an interesting feature on hypebeast.com. When you click on the three-bar icon, the main container section's opacity changes. How can I achieve this effect? ...

javascriptjquerycss

I find the SetInterval loop to be quite perplexing

HTML <div id="backspace" ng-click="deleteString(''); decrementCursor();"> JS <script> $scope.deleteString = function() { if($scope.cursorPosVal > 0){ //$scope.name = $scope.name - letter; ...

javascripthtmlcssangularjs

Challenges in the functionality of PHP form submission utilizing GET parameters

I'm currently working with PHP forms and the form tag I have looks like this: <form name="adv_search_form" action="<?php echo $targetpage; ?>" method="GET"> When I submit the form, it directs me to this URL: http://localhost/projectcode ...

phphtmlforms

Using webapp2 to serve a stylesheet in a non-Google App Engine environment

After successfully deploying an app using webapp2/jinja2 and a Paste server, I encountered difficulties serving static stylesheets. I managed to access static files by following this method. Additionally, I implemented a StaticFileHandler that I discovere ...

pythoncssgoogle-app-enginestaticwebapp2

Align images to the left in Typora for a cleaner look

Typora typically aligns all images in the center by default. https://i.stack.imgur.com/TrqIM.png In my search through the github.css, I was unable to locate any instances of img. $ grep img "/Users/me/Library/Application Support/abnerworks.Typora/themes ...

cssmarkdown

Can someone point out the mistakes in my CSS Layout?

I've been struggling to make progress on this task over the past couple of days, encountering roadblocks with no clear solution in sight. The maze of nested divs I'm navigating through might be playing tricks on my mind, so having a fresh pair of ...

htmlcss

Updating content with jQuery based on radio button selection

Looking for assistance with a simple jQuery code that will display different content when different radio buttons are clicked. Check out the code here. This is the HTML code: <label class="radio inline"> <input id="up_radio" type="radio" n ...

javascriptjqueryhtml

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

javascripthtmlcss

Dynamic HTML5 elements in constant motion

I'm interested in creating an HTML5 canvas that features bouncing circle and square elements that interact with each other, potentially spinning upon collision. The best example I've come across so far is located at this link. var canvas = docu ...

javascripthtmlhtml5-canvascollisiongravity

Expansive Bootstrap division

I am seeking assistance in achieving a Bootstrap layout similar to the image provided below. My difficulty lies in ensuring that the yellow bar spans the full width of the Bootstrap container without disrupting the stacking order of columns on mobile view. ...

htmlcsstwitter-bootstrapresponsive-design

"Error" - The web service call cannot be processed as the parameter value for 'name' is missing

When using Ajax to call a server-side method, I encountered an error message: {"Message":"Invalid web service call, missing value for parameter: \u0027name\u0027.","StackTrace":" at System.Web.Script.Services.WebServiceMethodData.CallMethod(O ...

javascriptc#jqueryhtmlajax

PHP - Unexpected behavior while using a switch statement for auto-incrementing variable inside a while loop

Can anyone assist me with this problem? I am currently testing a switch statement inside a while loop that compares values. The loop should end once a specific value reaches the limit $numRow, stopping the execution of the remaining code. Here is my code ...

phphtmlwhile-loopswitch-statement

Explaining how to iterate through objects (one by one) in the This.questionnaire.Profile at every click using JavaScript (answer not found in forums)

Creating a series of questions, each part being stored in This.question = {p1: {...}, p2: {...}, p3: {...}, p4: {...}, p5: {...} etc. (and many more). I want to be able to switch from one article to the next every time I click a button... click => next ...

javascripthtml

Title Divider Right

I am looking to add a divider to the right of a section title on my webpage. Here is what I have tried: I attempted this code, but here is the result: Here is the code snippet: <h4 class="section-title">Lastest From Blog</h4> .section-title ...

htmlcss

What is the best way to ensure a floated image matches the height of its parent container?

I am facing an issue with setting the height of a logo within a footer div to match the height of the div itself. Using height: 100% doesn't seem to work as expected. Below is the relevant HTML: <footer> <img src="images/circle_logo.png" ...

cssimagehtmlcss-float