如何将 Div 布局转换为基于 CSS 样式的 HTML 表格？

Question

我正在开发一个项目，需要将使用

<div>

元素设计的复杂布局转换为使用

<table>

、

<tr>

、

<td>

、

<colspan>

和

<rowspan>

标签的 HTML 表格。布局当前使用 CSS 进行样式设置，我希望在将其转换为表格格式时保留相同的结构和外观。

输入： 我有一系列

<div>

元素，以表格格式表示标题和数据单元格。每个

<div>

都有多个类属性，对应于定义其位置和大小的特定 CSS 样式。这是当前基于 div 的布局的片段：

<div class="c x1b y41 wf h14">Project</div>
<div class="c x20 y43 w10 h6">2023</div>
<div class="c x21 y43 w11 h6">2022</div>
<div class="c x23 y43 w12 h6">2021</div>
<div class="c x1e y43 w13 h6">2020</div>

<div class="c x20 y41 w14 h9">Amount</div>
<div class="c x26 y41 w15 h9">Ratio</div>
<div class="c x21 y41 w16 h9">Amount</div>
<div class="c x28 y41 w17 h9">Ratio</div>
<div class="c x23 y41 w18 h9">Amount</div>
<div class="c x29 y41 w19 h9">Ratio</div>
<div class="c x1e y41 w1a h9">Amount</div>
<div class="c x2a y41 w1b h9">Ratio</div>

<div class="c x1b y44 wf h6">Income</div>
<div class="c x20 y44 w14 h6">9.6</div>
<div class="c x26 y44 w15 h6">100.00</div>
<div class="c x21 y44 w16 h6">377.78</div>
<div class="c x28 y44 w17 h6">100.00</div>
<div class="c x23 y44 w18 h6">293.47</div>
<div class="c x29 y44 w19 h6">100.00</div>
<div class="c x1e y44 w1a h6">210.66</div>
<div class="c x2a y44 w1b h6">100.00</div>

CSS 样式： 布局由这些 CSS 样式控制，它们规定了 div 的尺寸和位置：

.h14 {height: 41.215200px;}
.h6 {height: 20.280000px;}
.h9 {height: 20.311200px;}
.w10 {width: 116.095200px;}
.w11 {width: 116.251200px;}
.w12 {width: 116.376000px;}
.w13 {width: 122.959200px;}
.w14 {width: 55.099200px;}
.w15 {width: 60.216000px;}
.w16 {width: 58.188000px;}
.w17 {width: 57.283200px;}
.w18 {width: 61.152000px;}
.w19 {width: 54.600000px;}
.w1a {width: 61.963200px;}
.w1b {width: 60.372000px;}
.wf {width: 73.008000px;}
.x1b {left: 112.450000px;}
.x1e {left: 537.830800px;}
.x20 {left: 186.914000px;}
.x21 {left: 303.641000px;}
.x23 {left: 420.511000px;}
.x26 {left: 242.801000px;}
.x28 {left: 362.609000px;}
.x29 {left: 482.287000px;}
.x2a {left: 600.262000px;}
.y41 {bottom: 490.373000px;}
.y43 {bottom: 511.303000px;}
.y44 {bottom: 469.313000px;}

预期结果： 我想将此布局转换为 HTML 表格。预期的表结构应类似于以下内容：

<table border="1">
  <tr>
    <td rowspan="2">Project</td>
    <td colspan="2">2023</td>
    <td colspan="2">2022</td>
    <td colspan="2">2021</td>
    <td colspan="2">2020</td>
  </tr>
  <tr>
    <td>Amount</td>
    <td>Ratio</td>
    <td>Amount</td>
    <td>Ratio</td>
    <td>Amount</td>
    <td>Ratio</td>
    <td>Amount</td>
    <td>Ratio</td>
  </tr>
  <tr>
      <td>Income</td>
      <td>9.6</div></td>
      <td>100.00</td>
      <td>377.78</td>
      <td>100.00</td>
      <td>293.47</td>
      <td>100.00</td>
      <td>210.66</td>
      <td>100.00</td>
  </tr>
</table>

尝试： 我尝试了多种方法来解析 div 并应用它们的样式来创建表格，但没有一种方法有效。我已经尝试使用 JavaScript 动态读取 CSS 属性并将它们作为属性应用到表格单元格，但我在维护布局完整性方面遇到了问题，尤其是在跨越行和列时。

问题： 任何人都可以提供有关如何考虑 CSS 样式以编程方式将这种基于 div 的布局转换为 HTML 表格的指导或解决方案吗？如果您能帮助解析 CSS 以定义表中适当的

<colspan>

和

<rowspan>

值，我们将不胜感激。

Answer 1

如果您只想让它看起来像表格而不是语义。您可以尝试使用网格和固定数量的列来执行此操作，例如使用

grid-template-columns: repeat(10, 1fr)

。