Using CSS and HTML to dynamically show rows in a horizontal line and create a new row when necessary

Can you arrange 3 table rows to display inline, so that after every 3 rows the table will automatically start on a new line and continue like this indefinitely?

<?php
$addon_name = $_SESSION['Add_On_OpName'];
mysqli_report(MYSQLI_REPORT_INDEX); //fixes a common PHP error
$prod_sel = $dbc->query("SELECT *
                           FROM Add_On
                           WHERE Add_On_OpName = '$addon_name'");
$prod_sel->data_seek(0);
while ($output = $prod_sel->fetch_assoc())
{
    $prod_run .= $output['Add_On_OpName'] . $output['Prod_Name'] . $output['Add_On_Price'] . $output['Add_On_Select'] . '<br>';
    $_SESSION['Add_On_OpName'] = $output['Add_On_OpName']; 
    $_SESSION['Prod_Name'] = $output['Prod_Name']; 
    $_SESSION['Add_On_Price'] = $output['Add_On_Price']; 
    $add_on_id = $output['Add_On_ID']; 
   
    echo "

<table style='width:100%'>
  <tr>
    <td id='red_circle'><a id='del' href='delete.php?delete=" . $add_on_id . "'>&times;</a></td> 
    <td><p id='session'>" . $_SESSION["Prod_Name"] . " &nbsp; + " . $_SESSION["Add_On_Price"] . " </p)</td> 
  </tr>
</table>
";
}
?>

CSS

table {
  width:100%;    
}

tr {
  display:inline-block;
  width:33%;
  margin:0;
  padding:0;
}

td {
  display:inline-block;
  width:20%;
  margin:0;
  padding:0;
}

Answer №1

Achieving this layout is indeed possible using CSS in the following manner:

table {
  width:100%;    
}
tr {
  display:inline-block;
  width:33%;
  margin:0;
  padding:0;
}
td {
  display:inline-block;
  width:20%;
  margin:0;
  padding:0;
}

By setting the rows to be one-third the width of the table, you can ensure that only three rows will fit before they wrap onto a new line. It may be necessary to adjust the width of the cells (td) to fit within the row (tr). In the example provided, there are five cells per row and a total of fifteen cells across three rows displayed on a single line before wrapping.

Answer №2

To ensure that each table row occupies one-third of its parent element's total width, which is the table element in this case (assuming 3 rows per line), you can achieve this using the following code:

JavaScript:

$('tr').css("width", $('table').width()/3+"px");

For a cleaner layout, consider using float:left on the table rows instead of inline display to avoid spacing issues. Additionally, add overflow:auto to the table when floating child elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing issues with Google Fonts not functioning properly when I insert the bootstrap CDN

I have encountered an issue while working on my landing page. I am using Google fonts for the design and trying to integrate Bootstrap as well. However, whenever I add the Bootstrap link, all the font styles stop working. I have checked the order of the CS ...

Exploring the multi-page game interface in Asp.net - Seeking advice and direction

I am in the process of developing the game page for my quiz project using asp.net. I have already implemented all the game logic on the server-side. The game is a quiz that involves user response timing, scoring based on correct answers and timing. It is ...

An issue has occurred while parsing the XML data, causing the document to not be properly formatted. As a result

Hey everyone, I'm currently working on an HTML/JavaScript project and have encountered a problem. There's a button in my code that is supposed to redirect to another page on my website, but when I click it, I receive the following error: XML Pars ...

Not all comparisons between two tables are guaranteed to be successful

Looking to compare records within two arrays and apply a style if they are equal. Here is my approach: var json = ["VIP Section","Master Section","Press Section","God Section"]; var sections = ["VIP Section","Master Section"]; if ( sections.length &g ...

Troubleshooting checkbox change not being detected by Ajax in JavaScript

I have encountered a problem with my AJAX JavaScript code that checks whether a checkbox is selected or not. The issue arises when fetching data from MySQL - the code works correctly for the first row, but always sends checkboxstatus = 1 for the subsequent ...

Ensure to add the name attribute when the checkbox is selected

Can anyone assist me with this issue? I am trying to create a form where, upon checking a checkbox, a name attribute should be added to the input field of the checkbox along with a number at the end. My current implementation is not working as expected. ...

Avoid clicking on links while the webpage is still loading

I am facing an issue with my website where I need to intercept link-clicking events using jQuery. Everything works fine, but there is a problem if a user clicks on a link before JavaScript finishes loading, causing it to redirect to another page in error. ...

Having trouble uploading files with jQuery File Upload functionality

Issue: I need to set a session variable and redirect the user to a different PHP page after uploading a .txt file using jQuery File Upload. HTML code (upload.php): <!-- The fileinput-button span is used to style the file input field as button --> ...

Troubleshooting problem with HTML5 nodes cloning in Internet Explorer

Is there a way to clone an HTML node using the cloneNode() method of the browser's DOM API or the jQuery clone() function? While the API works well with HTML tags, I am running into issues when using it with HTML5 tags like time. The problem I am fac ...

Is it possible to invoke a different PHP script and transmit $_GET parameters to it?

I currently have a setup where I'm able to call a PHP script from JavaScript and retrieve JSON data successfully. However, I now have the need to make the same call to the PHP script from within another PHP file. Is this achievable? Here is an exampl ...

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

Troubleshooting issues with cloning a row using jquery

I'm having trouble figuring out why my code isn't working. I want to duplicate a div and add it to the beginning of its parent div. Here's the code I have so far: //Adding a new row function addRow(btn) { var CopiedRow = $(this).closest( ...

Let's implement a sleek "load more" feature for your ASP.NET repeater just

Hey there, I was wondering if anyone has any cool samples of how to implement a Twitter-style load more items feature. How can I accomplish this using an ASP.NET repeater? ...

Generating a dynamic method for uploading multiple files

Is there a way to dynamically generate multiple upload forms upon clicking a button? I currently have code that allows for uploading one file, but I would like to be able to add additional forms for each file. In other words, if I need to upload 7 files, I ...

The Info Box in Google Maps seems to be ignoring the click event

What's the best method to add a click event to a Google Map? ...

React does not allow for images to be used as background elements

I am currently working on a web page and I have attempted to use both jpg and png images as backgrounds, but they do not seem to display on the page. import './Entrada.css' const Entrada = () => { return( <div style={{ b ...

Transform your CSS3 rotateY into PHP Imagick::distortImage

I'm trying to rotate an image by rotateY(-54deg) on the front-end, and now I need to achieve the same rotation in PHP using Imagick::distortImage. $image->distortImage(Imagick::DISTORTION_PERSPECTIVE, $controlPoints, true); Is there a straightfor ...

Unable to access additional features in dropdown menu

I need to extract all the options from a select dropdown menu. <select id="filterSel" name="filterSel" class="fixed-size" onchange="fnLoadAccountslegEnt(this.value); " onclick="closeDropDown();" size="1" style="top: 6.5px; margin: 0px; width: 58%; hei ...

MUI Grid - justify content to the right

I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...

Tips for ensuring jQuery waits until every single get() request within each() has been completed

I am faced with a challenge involving an array filled with URLs, and I am looking to extract their HTML content and store it in another array or JSON format. This is the current code snippet: url = ["/page_1.html", "/page_2.html"]; received_data = []; ...