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?

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

Adjusting the input label to be aligned inside the input box and positioned to the right side

I am currently working on aligning my input label inside the input box and positioning it to float right. The input boxes I am using have been extended from b4. Currently, this is how it appears (see arrow for desired alignment): https://i.stack.imgur.co ...

htmlcssvue.js

Is there a way to switch between different ag-grid themes using SCSS when loading them?

I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...

csssassag-grid

I'm having trouble getting a CSS transition to work on a PNG sequence using jQuery in Mozilla

For my latest project, I decided to create an animation using a PNG sprite sequence. The idea was to add a smooth transition effect on hover and have the animation play in reverse when the hover state ends. If you want to take a look at the code yourself, ...

jquerycss

Revamping the hyperlinks in my collapsible menu extension

Is there a way to modify the links in this accordion drop menu so that they lead to external HTML pages instead of specific areas on the same page? I've tried various methods but can't seem to achieve it without affecting the styles. Currently, i ...

javascriptjqueryhtmlcss

When applying styles in Polymer, it's important to take into account the width and height

Having trouble setting the width of elements within container elements in Polymer. Here's a simple example that illustrates the issue: <!doctype html> <html> <head> <base href="https://polygit.org/polymer+:master/webcomponent ...

cssshadow-dompolymer-2.x

Solution for accessing the callee function in JavaScript slide down operation

While exploring a tutorial from CSS Tricks about animating section height, I came across a solution that I would like to implement in my Angular 2 application. Here is the function responsible for expanding sections in my app: expandSection(element) { / ...

javascripthtmlcssangular

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Is there a way to ensure that all images maintain the same height and width using CSS percentages, rather than set pixel values? I'm working on displaying images in circles, where most are uniform in size but a few outliers distort the shape. The wide ...

javascripthtmlcssimagegoogle-maps-api-3

What is the best way to showcase a String variable with spaces in the value field of a form within JSP?

When working with a String variable in JSP and trying to display it in a form field, there might be an issue if the string contains spaces. Only the first word is displayed instead of the entire sentence. Below is the code snippet along with the resulting ...

javahtmlcssjsp

Apply border-radius to the group of columns in CSS

I'm having trouble applying border-radius to the column group in an HTML table. Is there a solution for this issue that allows me to maintain accessibility for the table view? Is there a way to achieve border-radius on the column group while ensuring ...

htmlcssreactjssasshtml-table

Differences between flexible and fixed-width columns in responsive grid layouts

Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. ...

cssresponsive-designflexboxgrid-system

Designing a webpage feature that enables users to choose an image from the selection

Can someone help me with coding a feature on my page where users can simply click an image to select their favorite design? I want the selection to be recorded and sent to me without requiring any text input from the user. I plan to use jQuery to display t ...

jqueryhtmlformsxhtml

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

javascripthtmljquery

simulate the act of clicking on a download link by utilizing a secondary click

adown is a link that allows users to download a file from my webpage. It functions properly on the page. However, btndown is a button designed to simulate clicking on the adown link, but unfortunately, it does not work as expected. When the btndown button ...

javascripthtmljquery

Hiding a Blogger section when its widget is not visible

Take a look at this code: <b:section id='page-list'> <b:widget id='PageList1' locked='false' type='PageList' version='2' visible='true'> </b:widget> </b:section> I wa ...

javascripthtmljqueryblogger

EJS file not displaying stylesheets and images correctly during rendering

I'm currently in the process of building a website, but when I try to render an ejs file (index.ejs), only the HTML portion is displayed without showing any stylesheets, fonts, or images. Here is the code snippet for linking the stylesheets: <!D ...

htmlnode.jsexpressdirectoryejs

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

After successfully developing a Universal Windows Platform app in Visual Studio using WinJS, JavaScript, CSS and HTML, I am now interested in leveraging the same code base to create an Android application. Could you guide me on the necessary steps to run ...

javascriptandroidhtmlcsswinjs

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

htmlcsssvg

Tips for turning off the auto save password option on browsers for user registration forms

Is there a way to prevent browsers from saving passwords on the add users form? I've tried using autocomplete="off" but it doesn't seem to work for saved passwords. I've searched extensively for a solution but haven't found the right on ...

javascriptjqueryhtml

Consecutive pair of JavaScript date picker functions

My issue involves setting up a java script calendar date picker. Here are my input fields and related java scripts: <input type="text" class="text date" maxlength="12" name="customerServiceAccountForm:fromDateInput" id="customerServiceAccountForm:from ...

javascripthtml

Refresh in AJAX, automated loading for seamless transition to a different page

Having an issue with the page not auto-refreshing, although it loads when I manually refresh. P.S Loading the page onto another page. Below is my HTML and AJAX code along with its database: The Trigger Button <?php $data = mysqli_query ...

javascriptphpjqueryhtmlajax