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

我正在使用该库生成PDF，但无法使用大型表，因为该库不支持它。因此，我将表更改为使用

span

标记，并使用

display:table cell

和

display:table row

设置元素样式

问题是仍然将这些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>

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：

您可以模拟一张桌子，播放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;
}

它将自动占据100%的宽度，因为

显示：block

，所以我们很好。高度和溢出值是自动的，原因与表相同（可能只在tr中需要）

最后是细胞。对于td，我们将设置一个display:inline块，并使其向左浮动：

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

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

---

您可以在此处看到一个使用html代码并更新css的示例：

display:table/*/display:table cell//display:table row//display:table column//display:table column group//display:table footer group//display:table header group/*/是的，我试图完全避免使用表格。我是否使用

display:table

或table标记并不重要。这两个我都不能用。我需要在不使用任何形式的表的情况下获得相同的外观。您需要使用display属性。然后您可以将行为更改为表行和单元格。例如，是的，我知道这一点。问题是当我这样做时，

dompdf

将样式视为一个表标记。所以我不能使用

显示

样式。我需要其他方法使它们看起来一样。