Question

我正在尝试使用nested tables重写一些遗留代码CSS layout。它包含tabular data [reports]以及layout info，例如background color，row/column height/width, alignment等所有包装在嵌套表格下的内容。 layout/template可由用户配置。因此，html/UI代码会根据template data到JAVA动态生成。因此inline styling用于动态代码生成。

我尝试将div elements与display:table, table-row, table-cell一起使用，但colspan/rowpsans是障碍。

示例代码段

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

以上代码是使用template从pure JAVA动态生成的，并且未应用外部CSS。由于复杂的UI结构，有时template布局在生成时不会与nested table布局同步。

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

提前致谢。

Answer 1

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

一个很好的例子是：divtable converter

实施例

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

HTML

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

CSS：

/* 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;
}

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

我希望它有所帮助！

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

1 个答案:

实施例

HTML

CSS：