Want to Replace Table with Div

Question

I have an issue with printing HTML to Mpdf, so, I want to convert the Main Table to Div, so it works in MPDF.

I need the same layout using div

Currently this using Table

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

OUTPUT:

I need same above output but using this div, I tried but not working

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

I want to implement into the MPDF to print pages.

Expected result

you can't convert html tags with css, you can change only styles with css and change the printable version with this: — Alex, Jun 05 '19 at 12:19
Yes, I just want to keep the same output(screenshot attached), if possible with a different style sheet, its good with div tag — Ghanshyam Nakiya, Jun 05 '19 at 12:24
you can use div tags then set display: table; for example check this link: https://css-tricks.com/almanac/properties/d/display/#display-table — Alex, Jun 05 '19 at 12:27

score 0 · Accepted Answer · answered Jun 05 '19 at 13:16

This is solution I got it

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

Want to Replace Table with Div

1 Answers1