是否可以使 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 . "'>×</a></td>
<td><p id='session'>" . $_SESSION["Prod_Name"] . " + " . $_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;
}
最佳答案
是的,使用 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。
关于jquery - CSS-HTML : dynamically display table rows inline and break new row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36512202/