显示:table-cell &不使用表的表行替代(dompdf的问题)


display: table-cell & table-row alternative without using tables (problems with dompdf)

我正在使用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/

您可以模拟一个使用span标签的displaywidthfloat的表格(尽管使用div会更好)。

表的想法是有一个块,将保存所有的东西:

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

它有显示块(如果可能的话使用div),你想要height:autooverflow:auto,所以它会随着浮动元素一起增长。

那么这一行将是相似的:

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

由于display:block,它将自动占用100%的宽度,所以我们很好。高度和溢出值是自动的,原因与表相同(可能只需要在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/