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

Question

是否可以使 3 行内联显示，以便在 3 行之后表格将自动在新行开始，并无限期地继续下去？

<?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;
}

Answer 1

是的，使用 CSS 如下:

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

这使得行成为表格宽度的 1/3，因此在开始使用下一行之前只有 3 行适合。您可能还需要设置 td 的宽度，以便它们适合 tr 的宽度，上面的示例适用于每个 tr 5 个 td，它在断开之前在一行中呈现 3 个 tr 中的 15 个 td。