在 PHP 中使表格彼此相邻出现答案

【问题标题】：Making tables appear next to each other in PHP在 PHP 中使表格彼此相邻出现
【发布时间】：2014-04-16 19:02:54
【问题描述】：

我是 PHP 新手，我试图让表格彼此相邻而不是出现在第一个表格下方。我试图使用 "table style="float: left"" 但这显然在 PHP 中不起作用，有人知道如何做到这一点吗？

尝试在您的帮助下修复它，但没有任何反应，也许我误解了什么，我不是很擅长这个。

<html>
<head>
<title>Produktsida</title>
<style type=”text/css”>
table {
    display: inline-block
    width: 500px;
}
</style>
</head>
<body>
<?php
require_once 'dbconfig.php';

$result = mysqli_query($con,"SELECT * FROM produkt JOIN bild ON bild.idBild = produkt.idProdukt JOIN ingrediens ON ingrediens.idIngrediens = produkt.idProdukt");
?>

<table border='1'>

<?php
while($row = mysqli_fetch_array($result))
{
    $imgData = base64_encode($row['Bild']);
    ?>
    <tr>
        <td>
            <img src="data:image/jpeg;base64,<?php echo $imgData ?>" />     </td>
    </tr>
    <tr>
        <td>
            <?php echo $row['Produkt_Namn'] ?>
        </td>
    </tr>
<?php } ?>
</table>
<?php
mysqli_close($con);
?>
</body>

【问题讨论】：

它看起来像你在循环表格内容<tr> 并且表格标签在循环之外，你到底在寻找什么？
恐怕您的问题不在 float 属性中。这适用于 PHP 非常好。实际上不是依赖于 PHP，而是依赖于 CSS。向我们展示从 PHP 代码呈现的 HTML 和分配给使用的类的 CSS，如果可能，将它们放在 jsfiddle 中
试试这个小提琴jsfiddle.net/ANMdL当你设置css样式float: left你必须设置表width

标签： php css html-table

【解决方案1】：

PHP 与此无关。浏览器（进行渲染）只能看到 PHP 的输出（以及您引用的任何静态文件）。

table style="float: left" 应该可以正常工作，请注意您的报价。您不能在由 " 字符分隔的 PHP 字符串文字中使用未转义的 "。

使用' 或转义引号字符。

【讨论】：

【解决方案2】：

PHP 不是客户端语言，它是服务器端语言。您在 PHP 中所做的任何输出都会呈现为 HTML。

默认情况下，我认为表格是块级项目，这意味着它们旁边不允许有内容。

您可以将表格包装在 DIV 元素中。

CSS

div.table-holder1 { width:50%; float:left; }
div.table-holder2 { width:50%; float:right; }

PHP

print '<div class="table-holder1"><table>...</table></div>';
print '<div class="table-holder2"><table>...</table></div>';

【讨论】：

<div> 也是一个块元素。这应该基本上实现与将table-holder1 和table-holder2 类添加到表而不是div 相同的目标。

【解决方案3】：

除非你给你的桌子上课，否则我会这样做：

<table class="myTableClass">
   ....
</table>

.myTableClass{width:40%; float:left; margin-right:5%}

那应该修好了

【讨论】：

【解决方案4】：

与问题没有直接关系

我的第一个提示是重新格式化您的代码，而不用 echoing 每一行代码：

<?php
$result = mysqli_query($con,"SELECT * FROM produkt JOIN bild ON bild.idBild = produkt.idProdukt JOIN ingrediens ON ingrediens.idIngrediens = produkt.idProdukt");
?>
<table border='1'>

    <?php
    while($row = mysqli_fetch_array($result)) { /* Begin looping the rows */
        $imgData = base64_encode($row['Bild']);
    ?>
    <tr>
        <td>
            <img src="data:image/jpeg;base64,<?php echo $imgData ?>" />
        </td>
    </tr>
    <tr>
        <td>
            <?php echo $row['Produkt_Namn'] ?>
        </td>
    </tr>
    <?php } /* End looping the rows */ ?>
</table>
<?php
mysqli_close($con);
?>

答案

您必须使用 css 设置表格样式。默认情况下，表格是块级元素，它会自动在元素后放置换行符。

css的显示属性主要有两种：

//The default for the tables, divs etc. Most elements use display: block.
display: block

//The default for span, img and some others
display: inline

您可能知道，span 元素不会在元素之后放置换行符，因此如果不是因为一个问题，您可以使用它：它们没有任何实际尺寸，所以您例如，不能为它们设置宽度或高度。

为了解决这个问题，现代浏览器实现了display: inline-block，它结合了 span 的无换行符和 div 的尺寸。根据caniuse 的说法，它拥有接近 93% 的浏览器支持，因此几乎可以使用了。

如果你想使用display: inline-block，你可以使用这个css sn-p：

table {
    display: inline-block
    width: 500px;
}

如果您想了解更多关于 inline-block 的信息，请参阅这个关于 float vs inline-block 的问题。

【讨论】：

感谢帮助我更新了问题，因为它仍然无法正常工作（假设我做得正确）
您只使用一张桌子，您想让每个产品都有一张新桌子吗？如果是这样，请尝试在循环内移动和
标记（例如：pastebin.com/YQdKTrw6）