Question

我使用dompdf库生成PDF但不能使用大表，因为dompdf库不支持它。所以我更改了表格以使用span标记，并使用display: table-cell＆amp; display: table-row。

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

问题： 是否有替代的CSS样式我可以用来获得相同的外观和感觉没有使用display: table-cell＆amp; 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标签的显示， 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;
}

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

最后是细胞。对于td，我们将设置一个display：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/

显示：table-cell＆amp;没有使用表的表行替代（dompdf的问题）

1 个答案: