Table with CSS Grid

Question

My CSS Grid table doesn't have same width on its columns, I want to replicate the table structure but with CSS Grid.

I'm using grid-auto-flow: column; because in my app, the cells are dynamically generated and will be different in number.

An image to show the issue:

The code: https://jsfiddle.net/w8sdvnr7/1/

div {
  display: grid;
  grid-auto-flow: column;
}

p {
  border: 1px solid red;
  margin: 0;
}

table {
  border-collapse: collapse;
}

td {
  border: solid 2px red;
}

<h3>Not working: CSS Grid: The cells in the rows have different size.</h3>
<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
</div>
<div>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<hr>
<br>
<hr>
<h3>What I want: CSS Table: The cells in the rows have same size.</h3>
<table>
  <tr>
    <td>ABC</td>
    <td>A</td>
    <td>ABCDEFGHIJKLMNOP</td>
  </tr>
  <tr>
    <td>ABCDEFGHIJKLMNOP</td>
    <td>A</td>
    <td>AB</td>
  </tr>
</table>

the HTML structure is wrong for what you want to achieve as each `div` would have an independent `grid` property. — Angelin Calu, Jun 26 '21 at 11:11
yeah you right, I should look for a way to get the cells number of each row and then force a width based on that. Thanks — fivexi8617, Jun 26 '21 at 11:22
would be to complicated. Easier would be to use the correct HTML structure or use a script to load the content (innerHTML) of a div and move it in another single div to get the right HTML markup for a grid. — tacoshy, Jun 26 '21 at 11:24
you have 2 divs, so you have 2 grids , use a single div to draw a single grid, then rows and columns will match — G-Cyrillus, Jun 26 '21 at 13:48

score 2 · Answer 1 · answered Jun 26 '21 at 11:44

There is a solutions for your question

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, auto);
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}
.row {
    display: contents;
}

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of dataa really long piece of data</div>
    <div class="box f">short data</div>
  </div>

  <!-- Table Row -->
  <div class="row">
    <div class="box d">short data</div>
    <div class="box e">a really long piece of data</div>
    <div class="box f">short data</div>
  </div>
</div>

Angelin Calu · Answer 2 · 2021-06-26T11:25:27.753

0

You might want to use the grid-template-columns property to set the number of columns, however, you should also update the HTML structure for that to work:

div {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

here's the updated fiddle: https://jsfiddle.net/dk9epf57/9/

div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  
}

p {
  border: 1px solid red;
  margin: 0;
}

table {
  border-collapse: collapse;
}
td {
  border: solid 2px red;
}

<h3>Not working: CSS Grid: The cells in the rows have different size.</h3>
<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
 </div>
<hr>
<br>
<hr>
<h3>What I want: CSS Table: The cells in the rows have same size.</h3>
<table>
  <tr>
    <td>ABC</td>
    <td>A</td>
    <td>ABCDEFGHIJKLMNOP</td>
  </tr>
    <tr>
    <td>ABCDEFGHIJKLMNOP</td>
    <td>A</td>
    <td>AB</td>
  </tr>
</table>

edited Jun 26 '21 at 11:25

answered Jun 26 '21 at 11:19

Angelin Calu

1,905
8
24
44

thats not what he intends to do. look at the images. the table should have `min-content` as width. However with 2 independent grid he wont be able to achieve it without scripting. – tacoshy Jun 26 '21 at 11:21
@tacoshy, I would argue that this is exactly what the OP wants to achieve. – Angelin Calu Jun 26 '21 at 11:31
the images and description clearly states otherwise. `cells are dynamically generated and will be different in number` -> means you dont know the number of columns. Also your middle column has not a width of min-content. It takes up 1/3 of the width not only as much as it needs. – tacoshy Jun 26 '21 at 11:33
yeah, this is not working for me, I ended up by taking thr largest number of cells and added the CSS with the variable. thank you – fivexi8617 Jun 26 '21 at 11:44
Then you should change the display to `display: table; `, then establish what to use for rows and what to use for cells and set them up appropriately with `.tr{ display: table-row } .td{ display: table-cell }` – Angelin Calu Jun 26 '21 at 12:06

score 0 · Answer 3 · answered Jun 26 '21 at 14:03

You had a few answers, this one is to complete my earlier comment with examples to help you sort out what you want and decide to dig further into grid tutorials like https://css-tricks.com/snippets/css/complete-guide-grid/ or ressource alike https://gridbyexample.com/

display:table and display:grid may look similar somehow but are not.

about max-content used in the examples, you also can see How do min-content and max-content work?

div {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
}

p {
  border: 1px solid red;
  margin: 0;
}

table {
  border-collapse: collapse;
}

td {
  border: solid 2px red;
}

div.bc {
  background: red;
  border: red 1px solid;
  background: red;
  gap: 1px;
  width: max-content;
}

div.bc>* {
  background: white;
  border: none;
}

div.bnc {
  width: max-content;
  border: solid 1px red;
  gap: 2px;
  padding: 2px;
}
div.bnc p {
padding:0.5em;
}

<h3>CSS grid layout dispatching children into 3 columns</h3>
<b>border-collapse not avalaible;<b><br><br>
<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
<!--</div>
<div>-->
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<hr>
<br>
<hr>
<h3>HTML table-layout</h3>
<table>
  <tr>
    <td>ABC</td>
    <td>A</td>
    <td>ABCDEFGHIJKLMNOP</td>
  </tr>
  <tr>
    <td>ABCDEFGHIJKLMNOP</td>
    <td>A</td>
    <td>AB</td>
  </tr>
</table>
<br>
<hr>
<br>
<h3>CSS grid layout faking table-layout  </h3>
<b> table-layout and border-collapse faked through gap and background and width<b><br><br>
<div class="bc">
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
<!--</div>
<div>-->
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<br>
<hr>
<br>
<h3>CSS grid layout faking table-layout  </h3>
<b> table-layout without border-collapse faked width<b><br><br>
<div class="bnc">
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
<!--</div>
<div>-->
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>

ralph.m · Answer 4 · 2023-05-14T13:51:09.170

0

You can do this easily with Grid, but first make your HTML a bit simpler:

<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>

Then try this CSS:

div {
  display: inline-grid;
  grid-template-columns: repeat(3, min-content);
  background: red;
  padding: 2px;
  gap: 2px;
}

p {
  background: white; 
  margin:0;
}

CodePen demo

edited May 14 '23 at 13:51

answered May 14 '23 at 11:05

ralph.m

13,468
3
23
30

Table with CSS Grid

4 Answers4