想用 Div 替换表格

Posted 2023-05-07

【中文标题】想用 Div 替换表格

【英文标题】：Want to Replace Table with Div

【发布时间】：2019-06-05 12:15:15

【问题描述】：

我在将 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"  align="center"><strong>No</strong></td>
                                        <td class="TdDesign"  align="center"><strong>Type</strong></td>
                                        <td class="TdDesign"  align="center"><strong>Date</strong></td>
                                        <td class="TdDesign"  align="center"><strong>From Date</strong></td>
                                        <td class="TdDesign"  align="center"><strong>To Date</strong></td>
                                        <td class="TdDesign"  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"  align="center"><strong>No</strong></td>
                                        <td class="TdDesign"  align="center"><strong>Type</strong></td>
                                        <td class="TdDesign"  align="center"><strong>Date</strong></td>
                                        <td class="TdDesign"  align="center"><strong>Date</strong></td>
                                        <td class="TdDesign"  align="center"><strong>To Date</strong></td>
                                        <td class="TdDesign"  align="center"><strong>Status</strong></td>
                                        </tr></tbody></table>
                            </div>
                    </div>

我想在 MPDF 中实现打印页面。

预期结果

【问题讨论】：

你不能用 css 转换 html 标签，你只能用 css 改变样式并用这个改变可打印的版本：

是的，我只想保持相同的输出（附上截图），如果可能的话，使用不同的样式表，用 div 标签很好

你可以使用 div 标签然后设置 display: table;例如检查这个链接：css-tricks.com/almanac/properties/d/display/#display-table

【参考方案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>