Хотите заменить таблицу на Div

Question

У меня проблема с печатью HTML в Mpdf, поэтому я хочу преобразовать основную таблицу в Div, чтобы она работала в MPDF.

Мне нужна такая же раскладка с использованием div

В настоящее время это с использованием таблицы

    <style>
        .mainTable {
            background-color: #DEDBDE;
            width: 100%;
        }
        .TdDesign {
            background-color: #F9F9F9;
            color: #000000;
            font-size: 11px;
            padding-left: 5px;
        }
        .MainTD {
            background-color: #EDEDED;
            color: #000000;
            font-size: 11px;
            font-weight: bold;
            padding: 5px;
        }
        </style>
        <table class="mainTable" cellspacing="1" cellpadding="3" border="0">
                            <tbody>
         <tr>
                            <td class="MainTD">Leave</td>
                            <td colspan="3" class="TdDesign">
                                    <table id="supplier" class="mainTable" cellspacing="1" cellpadding="3" border="0">
                                        <tbody><tr>
                                        <td class="TdDesign" width="5%" align="center"><strong>No</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>Type</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>Date</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>From Date</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>To Date</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>Status</strong></td>
                                        </tr></tbody></table>
                            </td>
                            </tr>
        </table>

ВЫХОД:

Мне нужен такой же вывод выше, но с использованием этого div, я пытался, но не работает

         <style>
    .mainTable {
        background-color: #DEDBDE;
        width: 100%;
    }
    .TdDesign {
        background-color: #F9F9F9;
        color: #000000;
        font-size: 11px;
        padding-left: 5px;
    }
    .MainTD {
        background-color: #EDEDED;
        color: #000000;
        font-size: 11px;
        font-weight: bold;
        padding: 5px;
    }
    </style>    
        <div class="mainTable" cellspacing="1" cellpadding="3" border="0">
                            <div class="MainTD">Leave
                            <div class="TdDesign">
                                    <table id="supplier" class="mainTable" cellspacing="1" cellpadding="3" border="0">
                                        <tbody><tr>
                                        <td class="TdDesign" width="5%" align="center"><strong>No</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>Type</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>Date</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>Date</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>To Date</strong></td>
                                        <td class="TdDesign" width="10%" align="center"><strong>Status</strong></td>
                                        </tr></tbody></table>
                            </div>
                    </div>

Я хочу внедрить в MPDF для печати страниц.

Ожидаемый результат

Answer 1

Это решение, которое я получил

    <style>
    .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;
    }
    </style>
    <div class="divTable">
        <div class="divTableCell">Leave</div>
            <div class="divTableCell">
                <div class="divTable">
                    <div class="divTableCell"><strong>No</strong></div>
                    <div class="divTableCell"><strong>Type</strong></div>
                    <div class="divTableCell"><strong>Date</strong></div>
                    <div class="divTableCell"><strong>From Date</strong></div>
                    <div class="divTableCell"><strong>To Date</strong></div>
                    <div class="divTableCell"><strong>Status</strong></div>
                </div>
            </div>
        </div>
    </div>