Java 用css替换复杂的嵌套表布局

我试图用CSS布局重写一些遗留代码嵌套表。它包含表格数据[报告]以及布局信息，如背景颜色、行/列高度/宽度、对齐方式等，所有这些都包装在嵌套表下。布局/模板可由用户配置。因此，html/UI代码是通过JAVA基于模板数据动态生成的。Soinline样式用于动态代码生成

我尝试在显示中使用div元素：表、表行、表单元格，但colspan/rowpsan是障碍

示例代码段

上面的代码是使用纯JAVA从模板动态生成的，没有应用外部CSS。有时，由于复杂的嵌套表结构，UI布局在生成时与模板布局不同步

可以使用css/div元素或其他方法完全重写吗

---

提前感谢。

有很好的资源可以在线将表转换为div结构

一个很好的例子是：

例子： 您的示例代码将转换为2个文件html和css：

Html 任何进一步的定制都需要手工编写，但这是一个良好的开端

我希望有帮助

<tr valign="top">
<td nowrap  height="45"></td>
<td nowrap ></td>
<td nowrap  colspan="2"><font color="#000000" ><b><font size="-1" face="arial"><span>Report:</span></font></b></font></td>
<td nowrap  colspan="2"><font color="#000000" ><b><font size="-1" face="arial"><span>Report ABC</span></font></b></font></td>
<td nowrap >
  <table width=367 cellpadding=0 cellspacing=0 border=0>
    <tr>
        <td nowrap>
            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="1">
                <tr>
                    <td nowrap height="100%" align="center" valign="top">
                        <font color="#000000" ><b><font  face="arial"><span>Some Report Title</span></font></b></font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  </table>
 </td>
 <td nowrap  colspan="2"><font color="#000000" ><b><font size="-1" face="arial"><span>Some title:</span></font></b></font></td>
 <td nowrap ><font color="#000000" ><b><font size="-1" face="arial"><span>Some date</span></font></b></font></td>
</tr>

<p>&nbsp;&nbsp;<span style="color: #000000;"><strong><span style="font-family: arial;">Report:</span></strong></span><span style="color: #000000;"><strong><span style="font-family: arial;">Report ABC</span></strong></span></p>
<div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell">
                <div class="divTable">
                    <div class="divTableBody">
                        <div class="divTableRow">
                            <div class="divTableCell"><span style="color: #000000;"><strong><span style="font-family: arial;">Some Report Title</span></strong></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<p><span style="color: #000000;"><strong><span style="font-family: arial;">Some title:</span></strong></span><span style="color: #000000;"><strong><span style="font-family: arial;">Some date</span></strong></span></p>

/* DivTable.com */
.divTable{
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}