display：不使用表的table-cell和table-row替代方法（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标签的显示 ， 宽度和浮动的表格（尽管使用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;
}

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

最后是细胞。 对于td，我们将设置一个显示：inline-block并使它们向左浮动：

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

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

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