Question 192313 in PHP Question posted in
Official manual can be found here.

Table cells are not placed side by side in a PDF made with PHP and TCPDF

How can we get the below custom fields to show up in a Horizontal table in PDF where cells are placed side by side, not under each other? We are using TCPDF library https://tcpdf.org

We are expecting

header | header | header | header  //We want all headers to be on one row
Value  | Value  | Value  | Value   //We want all Values to be on one row

cell tables are not placed side by side using the below code

// Initialize the table
$tableHTML = '<table>';

foreach ($pdf_custom_fields as $field) {
    $value = get_custom_field_value($estimate->id, $field['id'], 'estimate');
    if ($value == '') {
        continue;
    }

    $tableHTML .= '<tr style="display: table-cell"th:each="col : ${col}"  >';
    $tableHTML .= '<th style= "border: 1px solid #999; font-weight:bold; color: #fff; background-color:#242c39;">' . $field['name'] . '</th>';
    $tableHTML .= '</tr>';
    $tableHTML .= '<tr style="display: table-cell"th:each="col : ${col}">';
    $tableHTML .= '<td style= "border: 1px solid #999;">' . $value . '</td>';
    $tableHTML .= '</tr>';
    
    
    
   
   
}

// Close the table
$tableHTML .= '</table>';

// Add the table to $organization_info
$organization_info2 .= $tableHTML;

This is how it looks:
enter image description here

When we changed the code to the follwing the table became a vertical table


$tableHTML = '<table>';
$fieldNames = [];
$fieldValues = [];
foreach ($pdf_custom_fields as $field) {
    $value = get_custom_field_value($estimate->id, $field['id'], 'estimate');
    if ($value == '') {
        continue;
    }

    $fieldNames[] = $field['name'];
    $fieldValues[] = $value;
}

foreach ($fieldNames as $index => $fieldName) {
    $fieldValue = $fieldValues[$index];
    $tableHTML .= '<tr>';
    $tableHTML .= '<th style="border: 1px solid #999; font-weight:bold; color: #fff; background-color:#242c39;">' . $fieldName . '</th>';
    
    $tableHTML .= '<td style="border: 1px solid #999;">' . $fieldValue . '</td>';
    $tableHTML .= '</tr>';
}

$tableHTML .= '</table>';

Please check this:

enter image description here

Tags:

2

Answers


  1. 0

    You are creating a new row for each header and a new row for each value… that’s why they don’t sit side-by-side.

    Instead you need to build the header and value cells individually, and combine them together to create a single row for each.

    This is a pseudo example…

    $headers = "";
$values = "";
foreach ($fields as $field) {
   $header .= "<th>" . $field['name'] . "</th>";
   $values .= "<td>" . $field['value'] . "</td>";
}
$table = "<table>";
$table .= "<thead><tr>" + $headers + "</tr></thead>";
$table .= "<tbody><tr>" + $values + "</tr></tbody>";
$table .= "</table>";

    The result will be that your individual header cells will be together, and your value cells will be together

    Although the question is about PHP, here is an equivalent javascript version to prove the concept achieves the result you desire…

    let data = [{"name": "One", "value": 1},{"name": "Two", "value": 2}];
let headers = "";
let values = "";
data.forEach(function(field) {
  headers += "<th>" + field.name + "</th>";
  values += "<td>" + field.value + "</td>";
});
let html = "<table border='1'>";
html += "<thead><tr>" + headers + "</tr></thead>";
html += "<tbody><tr>" + values + "</tr></tbody>";
html += "</table>";
document.getElementById("output").innerHTML = html;
    <div id="output"></div>

    Alternatively, if you don’t want to create variables, then you can build it like this instead…

    $table = "<table>";
$table = "<thead><tr>";
foreach ($fields as $field) {
   $table .= "<th>" . $field['name'] . "</th>";
}
$table = "</tr><thead>";
$table = "<tbody><tr>";
foreach ($fields as $field) {
   $table.= "<td>" . $field['value'] . "</td>";
}
$table = "</tr><tbody>";
$table .= "</table>";

    And another javascript example…

    let data = [{"name": "One", "value": 1},{"name": "Two", "value": 2}];
let html = "<table border='1'>";
html += "<thead><tr>";
data.forEach(function(field) {
  html += "<th>" + field.name + "</th>";
});
html += "</tr></thead>";
html += "<tbody><tr>";
data.forEach(function(field) {
  html += "<td>" + field.value + "</td>";
});
html += "</tr></tbody>";
html += "</table>";
document.getElementById("output").innerHTML = html;
    <div id="output"></div>
    Login or Signup to reply.
  2. 0

    If you need/mean a horizontal line of data, then do not repeat the <tr> tag, instead repeat only the th and td

    $tableHTML = '<table>';
$tableHTML .= '<tr>';

foreach ($pdf_custom_fields as $field) {
    ...
    $tableHTML .= '<th>' . $field['name'] . '</th>';
    $tableHTML .= '<td>' . $value . '</td>';
}
$tableHTML .= '</tr>';
$tableHTML .= '</table>';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search