想要将表格替换为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>