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

【问题标题】：display: table-cell & table-row alternative without using tables (problems with dompdf)显示：不使用表格的表格单元和表格行替代方案（dompdf 的问题）
【发布时间】：2014-07-24 00:25:58
【问题描述】：

我正在使用 dompdf 库生成 PDF，但由于 dompdf 库不支持它，因此无法使用大表。所以我将表格更改为使用span 标签并使用display: table-cell 和display: table-row 设置元素样式。

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

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

这是我的代码：

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/

【问题讨论】：

css-tricks.com/complete-guide-table-element
display: table /* / display: table-cell // display: table-column // display: table-column-group // display: table-footer-group / i> / display: table-header-group / */

是的，我试图完全避免使用表格。如果我使用display: table 或表格标签，这并不重要。我不能使用其中任何一个。我需要在不使用任何形式的表格的情况下获得相同的外观和感觉。

您需要使用 display 属性。然后您可以将行为更改为类似于表格行和单元格，例如

是的，我知道这一点。问题是当我这样做时，dompdf 将样式视为表格标签。所以我不能使用display 样式。我需要其他方法让它们看起来一样。

/ display: table-row /

/ display: table-row /

标签： php css dompdf

【解决方案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;
}

由于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/

【讨论】：