我正在开发一个项目,需要将使用
<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>
值,我们将不胜感激。
如果您只想让它看起来像表格而不是语义。您可以尝试使用网格和固定数量的列来执行此操作,例如使用
grid-template-columns: repeat(10, 1fr)
。