Creating a table structure using div elements

Question

Creating a table structure using div elements

Creating a table with both vertical and horizontal scrolling, along with a fixed header and an auto width for the table is proving to be quite challenging. As a workaround, I'm experimenting with using div elements instead. Below is the code snippet I've come up with: Check out my code here

body {
  background: #20262E;
  padding: 20px;
  color:#fff;
  font-family: Helvetica;
}

.tableContainer{
  border:1px solid #fff;
  
}
.tableheader{
  font-weight:bold;
  border-bottom:1px solid #fff;
  position:relative;
  
}
.tableBody{
  max-height:150px;
  overflow-y:auto;
  padding-top:63px;
}
.tableheader .tablerow{
  display:table;
  background: red;
    width: 100%;
    position:absolute;
    
}
.tableheader .tablerow > div{
  padding:5px;
  display:table-cell;
  border-right:1px solid #fff;
    
}
.tableBody .tablerow{
  display:table;
}
.tableBody .tablerow > div{
  padding:5px;
  border-right:1px solid #fff;
  display:table-cell;
}

<div class="tableContainer">
  <div class="tableheader">
     <div class="tablerow">
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
       <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>
       <div>
       Lorem ipsum
       </div>
     </div>
  </div>
  <div class="tableBody">
     <div class="tablerow">
          <div>
       Lorem ipsum dolor sit amet
       </div>
       <div>
       Suspendisse ipsum diam, sollicitudin a tincidunt ac
       </div>

.tableContainer{ border:1px solid #fff;

}
.tableheader{
  font-weight:bold;
  border-bottom:1px solid #fff;
  position:relative;

}
.tableBody{
  max-height:150px;
  overflow-y:auto;
  padding-top:63px;
}
.tableheader .tablerow{
  display:table;
  background: red;
    width: 100%;
    position:absolute;

}
.tableheader .tablerow > div{
  padding:5px;
  display:table-cell;
  border-right:1px solid #fff;

}
.tableBody .tablerow{
  display:table;
}
.tableBody .tablerow > div{
  padding:5px;
  border-right:1px solid #fff;
  display:table-cell;
}

I'm currently struggling with achieving horizontal scrolling and managing column widths.

Alternatively, you can view my other code here. This code also presents challenges with horizontal scrolling.

Your assistance in resolving this issue would be highly appreciated.

jquery html css scroll css-tables

Answer 1

Answer №1

.tableheader should have a margin-right of 17px;

17px represents the width of the scrollbar

Answer 2

.tableheader should have a margin-right of 17px;

17px represents the width of the scrollbar

Answer 3

Answer №2

If you're looking for the best way to create a fully responsive table, consider using a structure like this:

/*
Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
  @media only screen and (min-width:1024px){
    tr:nth-child(odd) {
      background: #ccc;
    }
  }    
@media
  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #ccc;
    }
    
td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

/*
Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Secret Alias"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

<table role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">First Name</th>
      <th role="columnheader">Last Name</th>
      <th role="columnheader">Job Title</th>
      <th role="columnheader">Favorite Color</th>
      <th role="columnheader">Wars or Trek?</th>
      <th role="columnheader">Secret Alias</th>
      <th role="columnheader">Date of Birth</th>
      <th role="columnheader">Dream Vacation City</th>
      <th role="columnheader">GPA</th>
      <th role="columnheader">Arbitrary Data</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell">James</td>
      <td role="cell">Matman</td>
      <td role="cell">Chief Sandwich Eater</td>
      <td role="cell">Lettuce Green</td>
      <td role="cell">Trek</td>
      <td role="cell">Digby Green</td>
      <td role="cell">January 13, 1979</td>
      <td role="cell">Gotham City</td>
      <td role="cell">3.1</td>
      <td role="cell">RBX-12</td>
    </tr>
    <tr role="row">
      <td role="cell">The</td>
      <td role="cell">Tick</td>
      <td role="cell">Crimefighter Sorta</td>
      <td role="cell">Blue</td>
      <td role="cell">Wars</td>
      <td role="cell">John Smith</td>
      <td role="cell">July 19, 1968</td>
      <td role="cell">Athens</td>
      <td role="cell">N/A</td>
      <td role="cell">Edlund, Ben (July 1996).</td>
    </tr>
...More rows here...
  </tbody>
</table>

Answer 4

If you're looking for the best way to create a fully responsive table, consider using a structure like this:

/*
Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
*/
  @media only screen and (min-width:1024px){
    tr:nth-child(odd) {
      background: #ccc;
    }
  }    
@media
  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #ccc;
    }
    
td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

/*
Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Secret Alias"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

<table role="table">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">First Name</th>
      <th role="columnheader">Last Name</th>
      <th role="columnheader">Job Title</th>
      <th role="columnheader">Favorite Color</th>
      <th role="columnheader">Wars or Trek?</th>
      <th role="columnheader">Secret Alias</th>
      <th role="columnheader">Date of Birth</th>
      <th role="columnheader">Dream Vacation City</th>
      <th role="columnheader">GPA</th>
      <th role="columnheader">Arbitrary Data</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell">James</td>
      <td role="cell">Matman</td>
      <td role="cell">Chief Sandwich Eater</td>
      <td role="cell">Lettuce Green</td>
      <td role="cell">Trek</td>
      <td role="cell">Digby Green</td>
      <td role="cell">January 13, 1979</td>
      <td role="cell">Gotham City</td>
      <td role="cell">3.1</td>
      <td role="cell">RBX-12</td>
    </tr>
    <tr role="row">
      <td role="cell">The</td>
      <td role="cell">Tick</td>
      <td role="cell">Crimefighter Sorta</td>
      <td role="cell">Blue</td>
      <td role="cell">Wars</td>
      <td role="cell">John Smith</td>
      <td role="cell">July 19, 1968</td>
      <td role="cell">Athens</td>
      <td role="cell">N/A</td>
      <td role="cell">Edlund, Ben (July 1996).</td>
    </tr>
...More rows here...
  </tbody>
</table>

Creating a table structure using div elements

Answer №1

Answer №2

Similar questions

The headline box is displaying CSS code instead of the content. How can this issue be resolved?

Exploring the world of web scraping using Scrapy, Python, and a JavaScript-based website all in one

The issue with line-height causing the sliding URL effect to malfunction

How can I display a loading message in bootbox during the execution of an ajax process?

The .ogv video file type does not seem to be functioning properly within the HTML5 video tag on Firefox

Unable to manipulate dynamically added content using .load method

What is the best way to prevent centered elements from overflowing the screen using only CSS?

The vertical scrolling feature will come to a halt once it reaches a specific limit

Searching for the sequence "http" using regular expressions in Python

Is there a way to modify the font of all dropdown items at once? How can we ensure that the dropdown content appears on a single line without any truncation

The Angular (click) event requires two clicks in order to trigger the associated Typescript function

Issues with PHP Form Email DeliveryIt seems that there is a

What are some solutions for resolving a flashing responsive table issue that occurs when loading it via ajax?

To maintain the width values (maximum width) when using overflow:auto, do not make any adjustments. (CSS for scrollbars

Revise website design to adjust dynamically according to screen dimensions

Utilize a standard JavaScript function from a separate document within a function of a React component

Troubleshooting problems with opening and closing windows in JavaScript

The hamburger menu remains static and unresponsive on mobile screens, failing to expand as intended

Creating your own browser extension similar to Firebug: A comprehensive guide

Is it possible to execute AJAX within a popup feature?