样式化大数据 - 弹性还是网格？答案

【问题标题】：Stying large data - flex or gird?样式化大数据 - 弹性还是网格？
【发布时间】：2021-11-24 14:44:41
【问题描述】：

我有大量数据需要设置样式。它适用于每个文件而不是每种类型，并且需要以网格/表格的方式显示，但是由于 html，它会导致问题。一些数据行是空白的，而另一些则跨越多行。

我不能使用表格，因为这意味着单元格将变为水平而不是垂直

.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>

我需要所有单元格匹配。我试过使用 flex，唯一能让它工作的方法是给单元格添加一个固定的高度，但这是有问题的，因为我用这种方式丢失了很多数据

【问题讨论】：

我还应该指出，我不知道每次调用会收到多少个 dataColumns 或 dataRows
这是表格数据，因此您应该使用table

标签： css gridview flexbox

【解决方案1】：

使用表格而不是 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>

【讨论】：

数据是自上而下的，所以我得到文件 1 的所有数据，然后是文件 2 等。这会给我一个逆表

【解决方案2】：

如果可能，您可以按行排列数据，如下所示：

 <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>

但更好的选择是使用

来处理大数据表

【讨论】：

很遗憾没有。每张纸都有数据，分别是 A、B、C 等