Question 320845 in Html Question posted in
Some basic documentation can be found here.

Html – How to make responsible table by using grid?

I want to make a table that sould be able to change it’s rows and columns count on response to resize or just container width
needed result

enter image description here
I tried implement it using background of grid-gap but it creates empty red squares if there are not 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 tried approach with outline+gap+border
but that’s not possible to create beautifull border-raius like in an image above

how to implement responsible table using grid?

Table should change rows/columns count on response of it’s width

element should sligtly change it’s width if there is a free space left in a row

table bould should be border-radius

border should be collapsed

Tags:

2

Answers


  1. 0

    I think this it’s not possible to get a full control of inner and outer borders for a responsiveness grid. But you could try this trick where you overlaps items border and grid border for replicate your 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>
    Login or Signup to reply.
  2. 0

    A solution to collapse the borders of the items laying on the grid last row could be using Javascript to dynamically find out which items match that condition and set their border-bottom: none.

    Here in this demo I also added a .container div for the grid, responsible for the outer border having border-radius set.

    The demo shows several grids having a different number of items inside to demonstrate the correct behaviour of the border collapsing.

    Since the container size may change after page load, the action takes place both on the DOMContentLoaded event of document and the resize event of window.

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

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

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

  // Sets the border bottom for each item in the grid before performing any further action
  items.forEach(item => item.style.borderBottom = 'solid 1px black');

  // Determines what's the offsetTop of the last row,
  // by looking for the highest value among the grid items
  let lastRowOffsetTop = Math.max(...items.map(item => item.offsetTop));  

  // Grabs the items laying on the grid's last row sharing the same offsetTop found before
  let lastRowItems = items.filter(item => item.offsetTop === lastRowOffsetTop);

  //Removes the bottom border 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search