Заменить сложную структуру вложенных таблиц css

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 онлайн.

Один хороший пример будет: делимый конвертер

Пример:

Ваш пример кода будет преобразован в 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;
}

Любая дальнейшая настройка должна быть написана от руки, но это хорошее начало.

Я надеюсь, что это помогает!