嵌套类别布局的 Html 表格结构-解网

问：

我有一个包含许多类别的表格目前，我正在使用 tr 标签呈现它们，每个类别都将显示在子标签中

但是，当父单元格的高度增加时，这会导致表格布局中断

codepend: https://codepen.io/sayuto/pen/YzvPoBO

我哪里出了问题，或者有人有更好的主意如何做到这一点？我尝试渲染一个包含“父级”和“第一个子级”的 tr 标签，“其他子级”将在下一个 tr 中渲染，但这非常复杂，计算行跨度很困难。

我试图找出正确的 html 表格布局，我应该使用什么来呈现带有嵌套类别的表格

P/s：我正在尝试逐列渲染（这使我们更容易收集数据和加载使用默认渲染（逐行）构建数据结构并将数据加载到表上对于编写者和维护者来说都是一场噩梦（在本例中为嵌套类别）

CSS HTML 表格嵌套类别

感谢您的回复。我明白了，你说的是逐行渲染。（默认方式）我正在尝试逐列渲染（这使我们更容易收集数据和加载）构建数据结构并使用默认渲染（逐行）将数据加载到表上对于编写者和维护者来说都是一场噩梦（在这种情况下）

0赞 Mister Jojo 10/28/2022 #2

我给你做了这个测试代码......

const
  myTable = document.querySelector('#my-table')
, depIn   = document.querySelector('input[type=range]')
, depInV   = document.querySelector('input[type=range] + span')
  ;
depIn.value = 1;
depInV.textContent = depIn.value + ' X';

depIn.oninput =_=>
  {
  depInV.textContent = depIn.value + ' X'
  myTable.rows[7].cells[0].innerHTML = Array( depIn.valueAsNumber ).fill('x').join('<br>')
  }

body {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 14px;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em;
  color            : black;
  font-size        : .8rem;
  }
th {
  background-color : lightgrey;
  padding          : .6em;
  min-width        : 3.2em;
  }
td {
  background-color : whitesmoke;
  padding          : .2em .6em;
  min-width        : 3.2em;
  min-height       : 1.5em;
  }

<p> any X you need... <br>
  <input type="range" min="1" max="10" value="1"><span>1</span>   
</p>
<table id="my-table">
  <thead> <tr> <th>Compagny</th> <th>Department</th> <th>Group</th> <th>Team</th> <th>Unit</th> </tr> </thead>
  <tbody>
    <tr>
      <td rowspan="9">.</td> <!-- Compagny      -->
      <td rowspan="3">.</td> <!-- Department L.1 -->
      <td rowspan="2">.</td> <!-- Group      L.1 -->
      <td>.</td>  <!-- Team      L.1 -->
      <td>.</td>  <!-- Unit      L.1 -->
    </tr>
    <tr>
      <td>.</td>  <!-- Team      L.2 -->
      <td>.</td>  <!-- Unit      L.2 -->
    </tr>
    <tr>
      <td>.</td> <!-- Group      L.2 -->
      <td>.</td>  <!-- Team      L.3 -->
      <td>.</td>  <!-- Unit      L.3 -->
    </tr>
    <tr>
      <td rowspan="3">.</td> <!-- Department L.2 -->
      <td>.</td> <!-- Group      L.3 -->
      <td>.</td>  <!-- Team      L.4 -->
      <td>.</td>  <!-- Unit      L.4 -->
    </tr>
    <tr>
      <td rowspan="2">.</td> <!-- Group      L.4 -->
      <td>.</td>  <!-- Team      L.5 -->
      <td>.</td>  <!-- Unit      L.5 -->
    </tr>
    <tr>
      <td>.</td>  <!-- Team      L.6 -->
      <td>.</td>  <!-- Unit      L.6 -->
    </tr>
    <tr>
      <td rowspan="3"> x </td> <!-- Department L.3 -->
      <td>.</td> <!-- Group      L.5 -->
      <td>.</td>  <!-- Team      L.7 -->
      <td>.</td>  <!-- Unit      L.7 -->
    </tr>
    <tr>
      <td rowspan="2">.</td> <!-- Group      L.6 -->
      <td>.</td>  <!-- Team      L.8 -->
      <td>.</td>  <!-- Unit      L.8 -->
    </tr>
    <tr>
      <td>.</td>  <!-- Team      L.9 -->
      <td>.</td>  <!-- Unit      L.9 -->
    </tr>
  </tbody>
</table>

我不确定你使用的逻辑或结构。但是我发现，如果我想逐行渲染表格，有很多问题需要解决：行跨度、td 标签的数量、查找当前单元格的数据以及如何构建 json 数据。在第一行中，您可以轻松地渲染所有这些，但是从第二行开始，将出现许多可能的情况：有一个父标签/有一个子标签/有一个孙子标签/....

0赞 Sayuto 10/28/2022

谢谢，据我了解，逻辑很好，但对静态列有好处。就我而言，一切都是动态的，单元格、列和行也可以更改

上一个：&ers和 postcss-nested 在 create-react-app 中不起作用

下一个：如何将嵌套的影子 DOM 放在彼此的顶部？

嵌套类别布局的 Html 表格结构

Html Table struct for nested categories layout

评论

评论

评论