display：不使用表的table-cell和table-row替代方法（dompdf的问题）

Question

I am using the dompdf library to generate a PDF but can't use large tables as the dompdf library does not support it. So I changed the tables to use span tags and styled the elements with display: table-cell & display: table-row .

The problem is that dompdf is still treating those span tags as a table (because of the styles).

Question: Are there alternative css styles I can use to get the same look & feel WITHOUT using display: table-cell & display: table-row and without using tables?

Here is my code:

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

You can simulate a table playing with the display , width , and float of the span tags (although it would be better using div).

The idea of the table is having a block that will hold everything:

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

It has display block (use a div if possible), you want height:auto and overflow:auto so it will grow along with the floating elements.

Then the row will be similar:

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

It will take 100% of the width automatically because of the display:block , so we are good. The height and overflow values are auto for the same reason as the table (maybe it would only be needed in the tr).

And finally the cells. For the td, we will set up a display:inline-block and make them float to the left:

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

The only thing to take into account is that you may want different widths for different columns, in that case you will have to define specific classes with the widths. (notice that for an ideal visualization, table and tr must have padding:0 and margin:0, and the sum of all the widths must be equal to 100%)

You can see an example using your html code and updating your css here: http://jsfiddle.net/Mn7GH/3/