显示：不使用表格的表格单元格和表格行替代方案（dompdf 的问题）

Question

我正在使用dompdf库生成 PDF，但不能使用大表，因为dompdf库不支持它。因此，我更改了表格以使用span标签并使用display: table-cell&对元素进行样式设置display: table-row。

问题是dompdf仍然将这些 span 标签视为表格（因为样式）。

问题： 是否有其他 css 样式可以在不使用display: table-cell&display: table-row和不使用表格的情况下获得相同的外观和感觉？

这是我的代码：

HTML：

<span class="table">
    <span class="tr">
        <span class="th h2">Request Information</span>
    </span> 
    <span class="tr">
        <span class="td">Quote #</span>
        <span class="td">sdfsdfsdfsf</span>
    </span> 
    <span class="tr">
        <span class="td">Project Number</span>
        <span class="td">sdfsdfsdfsd</span>
    </span> 
    <span class="tr">
        <span class="td">Account Manager</span>
        <span class="td">khksjksjhdf</span>
    </span> 
    <span class="tr">
        <span class="td">Customer</span>
        <span class="td">ljsljflksjd</span>
    </span> 
    <span class="tr">
        <span class="td">Customer Location</span>
        <span class="td">
            123 Fake Street<br>
            City, State ZIPCode                 
        </span>
    </span> 
    <span class="tr">
        <span class="td">Customer Contact</span>
        <span class="td">lsjdlfkjslkjdfs</span>
    </span> 
    <span class="tr">
        <span class="td">Date Submitted</span>
        <span class="td">sdfsdfgdfg</span>
    </span> 
    <span class="tr">
        <span class="td">Date Approved</span>
        <span class="td">N/A</span>
    </span>
</span>

CSS：

span {
    width: 72% !important;
    padding: 5px 0px 5px 0px;
    /*padding-bottom: 9px;*/
    /*border: 1px solid Black;*/
}
span.table {
    /*border-collapse: collapse;*/
    /*display: table;*/
}
span .td {
    border: none !important;
    background: White !important;
    display: table-cell;
    padding-left: 10px;
    font-size: 16px;
    margin-bottom: 30px;
    border:none !important;
}
span .tr {
    display: table-row;
    border: 1px solid Black;
    padding: 2px 2px 2px 5px;
    background-color: #f5f5f5;
}
span .th {
    text-align: left;
    font-weight: bold;
}

jsFiddle：http : //jsfiddle.net/Mn7GH/

Answer 1

您可以模拟使用span 标签的display、width和float播放的表格（尽管使用 div 会更好）。

表的想法是有一个块来保存所有东西：

span.table {
    display:block;
    height:auto;
    overflow:auto;
    border:1px solid black;
}

它具有显示模块（使用如果可能的话一个div），你想height:auto和overflow:auto这样它会一起成长的浮动元素。

那么该行将是相似的：

span.tr {
    display:block;
    height:auto;
    overflow:auto;
    border: 1px solid Black;
}

由于 ，它将自动占用 100% 的宽度display:block，所以我们很好。出于与表格相同的原因，高度和溢出值是自动的（也许它只在 tr 中需要）。

最后是细胞。对于 td，我们将设置一个 display:inline-block 并使它们浮动到左侧：

span.td {
    border:none !important;
    float:left;
    display:inline-block;
    width:50%;
}

唯一需要考虑的是，您可能需要不同列的不同宽度，在这种情况下，您必须定义具有宽度的特定类。（注意，对于理想的可视化，table 和 tr 必须有 padding:0 和 margin:0，并且所有宽度的总和必须等于 100%）

您可以在此处查看使用 html 代码并更新 css 的示例：http : //jsfiddle.net/Mn7GH/3/