Display PHP array information in an HTML table

Question

Display PHP array information in an HTML table

I am facing an issue with an array that contains a record set generated by the CodeIgniter model.

When attempting to display these records in an HTML table using my view, the layout is not rendering correctly. Here is a snippet of my view:

<html>
<head>
    <title>Fuel Order:</title>
</head>
<body onload="window.print()">
<div class="col-xs-12 table-responsive">
<table class="table table-bordered" style="font-size: 11px;">
<tbody>
<?php
    if (!empty($printData)) {
        foreach ($printData as $item) {
?>
            <tr>        
                <td><p style="position: absolute;top: 20cm;right: 14cm"><?=$item->item_name?></p></td>
                <td><p style="position: absolute;top: 20cm;right: 11.5cm"><?=$item->fuel_qty?> Litres</p></td>
                <td><p style="position: absolute;top: 20cm;right: 6.5cm"><?=$this->amount_word?></p></td>                           
            </tr>           
</tbody>
</table>
</div>
</body>
</html>

Though the view appears to be correct, the issue arises when the records start overlapping each other.

html css codeigniter

Answer 1

Answer №1

To adjust the positioning of multiple records, consider modifying the top value based on the height of the values or preprinted grid

Ensure that the loop is properly closed BEFORE the </tbody>

<table class="table table-bordered"  style="font-size: 11px; ">
<tbody>
<?php
if (!empty($printData)) {
  $offset=2; // cm
  $cnt=0;
  foreach ($printData as $item) {
?>
<tr>        
  <td><p style="position: absolute;top: <?= ($cnt*$offset)+20 ?>cm;right: 14cm"><?=$item->item_name?></p></td>
  <td><p style="position: absolute;top: <?= ($cnt*$offset)+20 ?>cm;right: 11.5cm"><?=$item->fuel_qty?> Litres</p></td>
  <td><p style="position: absolute;top: <?= ($cnt*$offset)+20 ?>cm;right: 6.5cm"><?=$this->amount_word?></p></td>                           
</tr> 
<? $cnt++; 
  } // make sure to close your foreach loop HERE
  ?>
</tbody>

Answer 2

To adjust the positioning of multiple records, consider modifying the top value based on the height of the values or preprinted grid

Ensure that the loop is properly closed BEFORE the </tbody>

<table class="table table-bordered"  style="font-size: 11px; ">
<tbody>
<?php
if (!empty($printData)) {
  $offset=2; // cm
  $cnt=0;
  foreach ($printData as $item) {
?>
<tr>        
  <td><p style="position: absolute;top: <?= ($cnt*$offset)+20 ?>cm;right: 14cm"><?=$item->item_name?></p></td>
  <td><p style="position: absolute;top: <?= ($cnt*$offset)+20 ?>cm;right: 11.5cm"><?=$item->fuel_qty?> Litres</p></td>
  <td><p style="position: absolute;top: <?= ($cnt*$offset)+20 ?>cm;right: 6.5cm"><?=$this->amount_word?></p></td>                           
</tr> 
<? $cnt++; 
  } // make sure to close your foreach loop HERE
  ?>
</tbody>

Answer 3

Answer №2

It is recommended to remove the style attributes from the <p> tags as having identical positions for all of them may cause issues.

Consider setting the position of the table instead.

Answer 4

It is recommended to remove the style attributes from the <p> tags as having identical positions for all of them may cause issues.

Consider setting the position of the table instead.

Answer 5

Answer №3

I suggest making a small adjustment in your code setup. Consider ending your foreach loop within the table, instead of placing it outside. Additionally, try positioning your if statement before the table tag to avoid confusion. It is advisable to structure your statements in a clear manner using the following format (utilizing : for clarity). Also, eliminate position: absolute as it may alter the position of your elements relative to their parent container. For repositioning, opt for position: relative. To summarize:

<html>
<head>
    <title>Fuel Order:</title>
</head>
<body onload="window.print()">
<div class="col-xs-12 table-responsive">
    <?php if (!empty($printData)): ?>
        <table class="table table-bordered" style="font-size: 11px;">
            <tbody>
            <?php foreach ($printData as $item): ?>
                <tr>
                    <td><p><?= $item->item_name ?></p></td>
                    <td><p><?= $item->fuel_qty ?> Litres</p></td>
                    <td><p><?= $this->amount_word ?></p></td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    <?php endif; ?>
</div>
</body>
</html>

This revised structure should hopefully improve your coding experience :)

Answer 6

I suggest making a small adjustment in your code setup. Consider ending your foreach loop within the table, instead of placing it outside. Additionally, try positioning your if statement before the table tag to avoid confusion. It is advisable to structure your statements in a clear manner using the following format (utilizing : for clarity). Also, eliminate position: absolute as it may alter the position of your elements relative to their parent container. For repositioning, opt for position: relative. To summarize:

<html>
<head>
    <title>Fuel Order:</title>
</head>
<body onload="window.print()">
<div class="col-xs-12 table-responsive">
    <?php if (!empty($printData)): ?>
        <table class="table table-bordered" style="font-size: 11px;">
            <tbody>
            <?php foreach ($printData as $item): ?>
                <tr>
                    <td><p><?= $item->item_name ?></p></td>
                    <td><p><?= $item->fuel_qty ?> Litres</p></td>
                    <td><p><?= $this->amount_word ?></p></td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    <?php endif; ?>
</div>
</body>
</html>

This revised structure should hopefully improve your coding experience :)

Display PHP array information in an HTML table

Answer №1

Answer №2

Answer №3

Similar questions

Unable to display and conceal div elements

I am looking to transfer an image stored in a database onto a card

I find it confusing how certain styles are applied, while others are not

Issue with Jquery: Checkbox fails to get checked in Internet Explorer 7

Bootstrap: Organize Columns Simultaneously with Push and Pull for Customized Column Ordering

"Trouble encountered when attempting to add a CSS class to a select option in Firefox version 5

What is the process for adding tailwind CSS via npm?

Retrieve text excluding a specific class or id using jQuery

What causes the delay in CSS animations?

Employing CSS selectors to target the subsequent element that is accessible

Once the input is disabled, what is the best way to delete the previously inserted text?

Unable to retrieve the values from document.getElementById("") or document.getElementById("").innerHtml appears to be malfunctioning

Class for Eliminating the Background Image Using Bootstrap

Issues with interpreting PHP within HTML documents

Elements within the div are overlapping each other

Automatically adjusting input box size and position in real-time

What is the method of posting to PHP using JavaScript without utilizing Ajax?

Disable text input in Flatpickr and remove the default iPhone calendar

Utilize a variable within an HTML attribute

Tips for creating a form-flip, similar to a card-flip effect, using web technologies