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和＃39中使用15 td＆＃39; s ;在破坏前的一条线上。

Answer 2

每个表行的宽度必须是其父元素总宽度的1/3，即table元素，因为每行所需的行数为3.像这样：

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

如果对表行使用float:left而不是使用内联显示会更好，因为浮动元素不包含空格。对于表格，请在浮动子元素时添加overflow:auto。

CSS-HTML：动态显示内联行表并打破新行

2 个答案: