CSS- HTML: dynamically display table rows inline and break new row

Question

Is it possible to make 3 table rows display inline so that after 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); //overrid a common php nonsense 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']; //echo out product name
    $_SESSION['Prod_Name'] = $output['Prod_Name']; //echo out product desc
    $_SESSION['Add_On_Price'] = $output['Add_On_Price']; //echo out price
    $add_on_id = $output['Add_On_ID']; //echo out add on id
    // echo out all add on's and delete button
    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;
}

Arleigh Hix · Accepted Answer · 2016-04-09 03:30:26Z

1

Yes it is possible, with CSS as follows:

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

This makes the rows 1/3 the width of the table so only 3 fit before they start using the next line. You may also need to set width of the td's so they fit inside the width of the tr, above example works with 5 td's per tr, which renders 15 td's in 3 tr's on one line before breaking.

edited Apr 9, 2016 at 3:30

answered Apr 9, 2016 at 3:07

Arleigh Hix

11k1 gold badge17 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arleigh Hix Over a year ago

Can you post some code? This worked for me in Chrome.

Arleigh Hix Over a year ago

Your table only has one row. That does not fit the question. Also, you only have two <td> elements, my example was for five, you can't just blindly copy and paste and expect it to work without adapting it to fit your situation.

Arleigh Hix Over a year ago

Are you trying to format the source code with php? Because that would make it an entirely different question.

jerneva Over a year ago

I copied and pasted just to show you it didn't work. I have other css which was very similar to your own

Arleigh Hix Over a year ago

You first need to fix your closing </p> tag you have </p), and where are the other rows you want to display? Where is your css?

|

JTrixx16 · Accepted Answer · 2016-04-09 03:44:15Z

0

The width of every table row must be 1/3 of the total width of its parent element, which is the table element, since the number of rows that you want for each line is 3. Like this:

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

It would be much better if you use float:left for the table rows instead of using inline display, because floating elements does not contain spaces. For the table, add overflow:auto when floating children elements.

answered Apr 9, 2016 at 3:44

JTrixx16

1,1839 silver badges15 bronze badges

Collectives™ on Stack Overflow

CSS- HTML: dynamically display table rows inline and break new row

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related