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/