Stying large data - flex or gird?-CodePudding

I have a large amount of data to style. It comes in for each file rather and each type and needs to be displayed in a grid/table way, however due to the html it is causing problems. Some of the data rows are blank and others go over multiple lines.

I can't use a table as this would mean that the cells are going to go horizontal instead of vertical

See fiddle https://jsfiddle.net/r5aj7kse/

.data {
    display: flex
}

.dataColumn {
  flex-grow: 1;
  flex-basis: 0;
 }

.dataRow {
  border-bottom: 1px solid #000;
  padding: 4px;
}

<div class="data">
 <div class="dataColumn">
    <div class="dataRow">A</div>
    <div class="dataRow">B</div>
    <div class="dataRow"></div>
    <div class="dataRow">D</div>
 </div>
 <div class="dataColumn">
    <div class="dataRow">A<br>A</div>
    <div class="dataRow">B</div>
    <div class="dataRow">C</div>
    <div class="dataRow">D</div>
 </div>

I need all of the cells to match up. I have tried using flex and the only way I can get it to work is to add a fixed height to the cells but this is problematic as i lose alot of data this way

CodePudding user response：

Use table instead of div.

table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #c6c7cc;
  padding: 10px 15px;
}
th {
  font-weight: bold;
}

<table>
  <thead>
    <tr>
      <th scope="col" colspan="1">Item</th>
      <th scope="col">Qty</th>
      <th scope="col">table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
     
      <td>1</td>
      <td>text</td>
    </tr>
    <tr>
      <td>B</td>
     
      <td>1</td>
      <td>text</td>
    </tr>
    <tr>
      <td>C</td>
      
      <td>1</td>
      <td>text</td>
    </tr>
    <tr>
      <td>D</td>
      
      <td>1</td>
      <td>text</td>
    </tr>
  </tbody>
  
</table>

CodePudding user response：

If it possible, you can arrange data in rows, like this:

 <div class="data">
     <div class="dataRow">
        <div class="dataCol">A</div>
        <div class="dataCol">A</div>
        <div class="dataCol">A</div>
     </div>
     <div class="dataRow">
        <div class="dataRow">B</div>
        <div class="dataRow">B</div>
        <div class="dataRow">B</div>
     </div>
     <div class="dataRow">
        <div class="dataRow">C</div>
        <div class="dataRow">C</div>
        <div class="dataRow">C</div>
     </div>
     <div class="dataRow">
        <div class="dataRow">D</div>
        <div class="dataRow">D</div>
        <div class="dataRow">D</div>
     </div>
 </div>

but better choice use <table> for big data-table

CodePudding user response：

Do You Mean That The Columns are separated like this?

   

<style>
.data{
display:grid;
grid-template-columns: 1fr 1fr;
}
.dataColumn{
border: 1px solid black;
margin: 1em;
}
.dataRow{
border: 1px solid black;
}
</style>

<div class="data">
 <div class="dataColumn">
    <div class="dataRow">A</div>
    <div class="dataRow">B</div>
    <div class="dataRow">c</div>
    <div class="dataRow">D</div>
 </div>
 <div class="dataColumn">
    <div class="dataRow">A</div>
    <div class="dataRow">B</div>
    <div class="dataRow">C</div>
    <div class="dataRow">D</div>
 </div>