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

【问题标题】：Replace complex nested table layout with css用 css 替换复杂的嵌套表格布局
【发布时间】：2016-12-13 22:44:19
【问题描述】：

我正在尝试用CSS layout 重写一些遗留代码nested tables。它包含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>

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

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

提前致谢。

【问题讨论】：

标签： java html css nested-table

【解决方案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;
}

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

希望对你有帮助！

【讨论】：