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

Troubleshooting CodeIgniter Route Problems with the Homepage URL

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

The CSS 'top' attribute is without impact

When trying to access a view through a controller, the CSS is failing to apply properly

Prevent the line from crossing over the circle in CSS

How come certain invisible screen elements suddenly become visible when the document is printed?

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

When attempting to open a popup form by clicking a button, the code fails to function on IE6

Step-by-step guide to creating a dynamic button that not only changes its value but also

Denied rendering of design due to incompatible MIME type

Unable to adjust the padding of a div while the Bootstrap 4 navbar is in a collapsed state on mobile devices

A dynamic Angular search box designed for filtering columns in a table

Getting rid of a particular jQuery animation

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script

What could be causing my HTML button to malfunction when attempting to navigate to a different section of the webpage?

CSS transition effect to show content: display: block

What is the best way to showcase the dropdown menu items of a bootstrap navbar in a horizontal layout instead of vertical?

Guide on validating an Australian phone number with the HTML pattern

Streamlined approach to triggering ng-change on a single textbox

Validating HTML Forms Using PHP