Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? https://i.sstatic.net/xeZjl.png

https://i.sstatic.net/kdpJC.png I attempted to use grid-gap in the background, but it resulted in empty red squares when there weren't enough elements in a row. https://jsbin.com/patokutara/1/edit?html,output

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  grid-gap: 10px;
  background: red;
  width: 100%;
  height: 100%;
}

.grid__item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
}
<div class="grid">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>

I also tried using outline+gap+border but couldn't achieve the beautiful border-radius shown in the image above.

How can I create a responsive table using grid?

The table should adjust its rows/columns based on the width of the container.

The elements should adjust their width slightly if there is extra space in a row.

The table borders should have a border-radius.

The borders should be collapsed.

htmlcss

Answer №1

In my opinion, achieving full control over the inner and outer borders of a responsive grid may not be possible. However, there is a trick you can try where you overlap the items' borders with the grid border to replicate your desired example.

body { background-color: black; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            grid-auto-rows: auto;
            grid-gap: 0px;
            background: black;
            width: 100%;
            height: 100%;
            border: 1px solid white;
            border-radius: 5px;
        }
        .grid__item {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            color: white;
            border: 1px solid rgba(255, 255, 255, 1);
        }
<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div class="grid">
        <div class="grid__item">something</div>
        <div class="grid__item">else</div>
        <div class="grid__item">here Test</div>
        <div class="grid__item">another Stage</div>
        <div class="grid__item">status</div>
        <div class="grid__item">table</div>
    </div>
</body>
</html>

Answer №2

To solve the issue of collapsing borders for items in the last row of a grid, one approach is to use Javascript to identify those specific items and remove their border-bottom property dynamically.

In the demonstration below, a .container div has been added to wrap the grid, setting the outer border with rounded corners using border-radius.

Various grids with different numbers of items are displayed to showcase how the border collapse works correctly.

Given that the container size may change post-page load, the script triggers on both the DOMContentLoaded event of document and the resize event of window.

window.addEventListener("DOMContentLoaded", adjustLastRowBorders);
window.addEventListener('resize', adjustLastRowBorders);

function adjustLastRowBorders(){
  const grids = document.querySelectorAll('.grid');
  grids.forEach( grid => fixBorderIssues(grid) );  
}

function fixBorderIssues(grid){
  
  let items = Array.from(grid.children);

  // Applying initial bottom border to all items before making adjustments
  items.forEach(item => item.style.borderBottom = 'solid 1px black');

  // Identifying the offsetTop value of the last row by finding the highest among all items
  let lastRowOffsetTop = Math.max(...items.map(item => item.offsetTop));  

  // Selecting items in the last row based on the previously determined offsetTop value
  let lastRowItems = items.filter(item => item.offsetTop === lastRowOffsetTop);

  // Removing bottom borders from items in the last row
  lastRowItems.forEach(item => item.style.borderBottom = 'none');

}
.container {    
  border: 1px solid black;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));  
}

.grid__item {
  border-right: 1px solid black;
  /*border-bottom: 1px solid black;*/
  box-sizing: border-box;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="container">
  <div class="grid">
    <div class="grid__item">something</div>
    <div class="grid__item">else</div>
    <div class="grid__item">here Test</div>
    <div class="grid__item">another Stage</div>
    <div class="grid__item">status</div>
    <div class="grid__item">another Stage</div>
  </div>
</div>

<br>

<div class="container">
  <div class="grid">
    <div class="grid__item">something</div>
    <div class="grid__item">else</div>    
  </div>
</div>


<br>

<div class="container">
  <div class="grid">
    <div class="grid__item">something</div>
    <div class="grid__item">else</div>
    <div class="grid__item">here Test</div>
    <div class="grid__item">another Stage</div>
    <div class="grid__item">status</div>
    <div class="grid__item">another Stage</div>
    <div class="grid__item">....</div>
    <div class="grid__item">....</div>
    <div class="grid__item">....</div>
    <div class="grid__item">....</div>
    <div class="grid__item">....</div>
  </div>
</div>

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

The li::before pseudo element isn't working properly

I am having issues with my UL list where the CSS class I applied is not affecting the li::before pseudo class. Here's the HTML: <ul class="my-ul"> <li>Item 1</li> <li>Item 2</li> </ul> This is the CSS I a ...

htmlcsspseudo-element

Has any of my predecessors been hidden from view?

How can we detect if one of an element's ancestors has the display:none property set without having to traverse up the DOM Tree? ...

csshtmldom

Arranging two <ul> elements within an angular template

I need assistance with aligning two ul blocks. Currently, they are displaying next to each other, but their alignment is starting from the bottom instead of the top: <div class="ingredients-container"> <div style="display: inline-block; width: ...

htmlcssangularjs

Utilize TypoScript to inject HeaderData prior to implementing Style Definitions

My goal is to include my Google Tag Manager script before the style definitions in order to optimize the loading order and prioritize font-family rendering. Currently, I achieve this by: page.includeCSS { file1 = fileadmin/templates/css/bootstrap.css page. ...

cssgoogle-tag-managertyposcripttypo3-11.x

Displaying background images as list items on a web page outside of

I am facing an issue with an unordered list within a div where the list item images are floating outside the div. Does anyone have a solution for this? You can see an example of the problem on Any assistance would be greatly appreciated! ...

csslist

Steps for assigning an id to a newly created div within a parent div while in design mode

Imagine creating a div element with the attribute contenteditable="true", and then checking the console for what happens next: 1st. In the console, you only see a simple div tag. <div id="typbody" contenteditable="true" style="width:100%; height:200px ...

javascriptphphtml

The issue of border-radius and shadow box inconsistency

I'm trying to style a div with the following properties: .example { margin: 200px; width: 200px; height: 200px; border-radius: 20px; box-shadow: white 0px 0px 0pt 8pt, #033354 0px 0px 0pt 11pt; } <div class="example"> </div> ...

htmlcss

Retrieving the value of a formControl within a formArray is made possible through a reactive form in

How can I retrieve the value of ItemName in my HTML code? When I attempt to use {{invoiceForm.controls[i].items.controls.itemName.value | json}}, it returns as undefined. <form [formGroup]="invoiceForm"> <div formArrayName="items" *ngFor="let ...

javascripthtmlangularangular-reactive-forms

Tips for securely encrypting a PHP file when combining it with an HTML file using the phpB

I am attempting to encrypt a .php file using phpBolt. It works fine when the file contains only PHP code, but it fails when there is a mixture of HTML and PHP. Here is the encryption code: <?php /** * src : source folder * encrypted : Output folde ...

phphtmlencryption

The justify-content-around property in Bootstrap-4 does not seem to be functioning as expected when

I've been working with bootstrap-4 and I'm struggling to understand why justify-content-around functions properly with flex-row but not with flex-column. I tried applying flex-column justify-content-around to div.item2 but it's not producing ...

htmltwitter-bootstrapbootstrap-4flexbox

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

htmlcsstwitter-bootstrap-3

What is the best way to utilize a color picker to apply CSS color to a parent element?

When the pencil glyphicon is clicked, a color picker appears. I only want to apply the selected color from the color picker to the list elements that are the grand parent of the pencil glyphicon. Here's a snippet of my Ruby front-end code: <% cat ...

javascriptjqueryhtmlcss

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

javascripthtmlcss

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

javascriptjqueryhtmlfunctionreference

It is not possible to submit a form within a Modal using React Semantic UI

I am working on creating a modal for submitting a form using React semantic UI. However, I am encountering an issue with the submit button not functioning correctly and the answers not being submitted to Google Form even though I have included action={GO ...

javascriptcssreactjssemantic-ui

What are the steps to create a hovering dropdown menu that changes the background window to transparent when hovered over?

Is there a way to create a dropdown menu that changes the background window to transparent when hovered over? Here is an example of what I am looking for: The dropdown menu should look like this when hovered over: I would like the background window to b ...

htmlcss

Replace particular letters within the text with designated spans

Suppose I have this specific HTML code snippet: <div class="answers"> He<b>y</b> <span class='doesntmatter'>eve</span>ryone </div> Additionally, imagine I possess the subsequent array: ['correct' ...

javascriptjqueryhtml

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Is there a way to conditionally render a component without affecting the layout of other components? I'm trying to avoid unwanted shifts caused by this div Do you have any suggestions? Here is a snippet of my code: const [displayFeedbackMessage, s ...

javascriptcssreactjsmaterial-ui

What is the best way to incorporate line breaks into a reportlab PDF created in HTML format?

Currently, I am facing a challenge in generating PDFs using reportlab. The data that needs to be displayed is fetched from a dataframe. However, one field contains a lengthy text that requires breaklines for better readability in the PDF. Below is the sni ...

pythonhtmlreportlab

Using jQuery's .on() method to dynamically add classes

Why is this method not functioning as expected? My understanding was that by assigning a class to the trigger element when it opens, I could then use that class to close it when the trigger is clicked again. // Trigger for menu $('.menu-trigger' ...

jqueryhtml