Recreating html table type cell and column width layout with css grid

user23337104
February 2, 2024
271 views
1 vote
2 Answers

I want to display data in a table, but tag is not allowing me to do the things I want to. The next best thing is using grid, however I am unable to style columns in a way that suits me.
My goal is to make column width be the same width of the widest cell of that column. All columns would be dynamic width.

At the moment my css looks like this:

display: grid;
grid-template-columns: repeat(13, 1fr);
width: 100%;
border: 1px solid black;

And all the columns are the same width and not at all dynamic. If I change 1fr > auto; then each row cells have different widths.
In short, I want each rows columns to be the same width as the widest cell of that column from all rows.
Can I achieve this with just html and css or do i need to use js? Should I try doing this with flexbox instead? The is out of question due to it not fitting the needs of the app.

Edit to clarify expectations and result:
If I set it as repeat(13, 1fr);, then all columns in all rows will be same width. This is not the desired outcome, because I want some columns to be wider or thinner depending on the content inside.
If I set repeat(13, auto);, then columsn have dynamic width, however that happens to all rows, meaning in result I get different col width in each row (one col width might be larger than same col in a different row).
What I want to ultimately achieve, is make a table like structure, where col width on all rows is the width of the widest cell in that column of all the rows. If you take a look at how table tag does it.

Reason why I am not just using table: I need other elements inside the table, that are not allowed inside table tag.

Answers

I’m not perfectly sure I got what you meant, but if you intended to have a grid layout table-like where each cell extends its width as max as the widest cell on the same column, but yet not being any wider, a solution could be having the width of the container as width: fit-content;and the the grid layout as grid-template-columns: repeat(13, auto);

table td{
  border: solid 1px;
}

.grid{
  display: grid;
  grid-template-columns: repeat(13, auto);
  border: 1px solid black;
  width: fit-content;
  gap: 1px;
}

.grid .cell{
  border: solid 1px;
}

<h1>TABLE layout</h1>

<table>
  <tr>
    <td>1</td>
    <td>very large content</td>
    <td>3</td>    
    <td>4</td>
    <td>5</td>
    <td>6</td>    
    <td>7</td>
    <td>8</td>
    <td>9</td>    
    <td>10</td>
    <td>11</td>
    <td>12</td>    
    <td>13</td>    
  <tr> 
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>    
    <td>4</td>
    <td>5</td>
    <td>6</td>    
    <td>very large content</td>
    <td>8</td>
    <td>9</td>    
    <td>10</td>
    <td>11</td>
    <td>12</td>    
    <td>13</td>    
  <tr> 
</table>

<h1>GRID layout</h1>

<div class="grid">    
  <!-- row[1] -->
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <!-- row[2] -->
  <div class="cell">1</div>
  <div class="cell">very large content</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <!-- row[2] -->
  <div class="cell">1</div>
  <div class="cell">d</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">very large content</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
   <!-- row[2] -->
  <div class="cell">1</div>
  <div class="cell">d</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">very large content</div>    
</div>

You can, of course, do this with grid and for that your javascript needs to access relevant element(s) of the document appropriately. The code may be as under:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
    <style>

        .theGrid {

            display: grid;
            grid-template-columns: repeat(13, 1fr);
            gap: 5px;
            border: 1px solid black;   

        }

    </style>

    <script>
        window.onload = ()=>{

            // dummy data 
            data = ['One','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten','Eleven','Twelve','Thirteen']

            // dummy data
            data2=[]

            for (let x=1; x<=5; x++){
                data2.push(data)
            }

            theTable = document.getElementById('tbl')

            for( row of data2) {

                for (col of row){

                    aCol=document.createElement('div')
                    aCol.append(col)
                    
                    theTable.append(aCol )
                }
                
            }

        }
    </script>
</head>
<body>
    <div class="theGrid" id="tbl">

    </div>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.