如何将 CSS 与 PHP while 循环和表格结合起来？答案

【问题标题】：How to combine CSS with PHP while loop and table?如何将 CSS 与 PHP while 循环和表格结合起来？
【发布时间】：2013-03-16 04:33:10
【问题描述】：

我想知道是否有可能以一种简单的方式，当我使用 while 函数调用一堆数据并将它们放入表中但我想使用 CSS 使其成为具有常规背景的一行和具有常规背景的一行浅色背景。

希望我说的有道理....

这就是我所拥有的：

echo "<style type='text/css'>";
echo "th {background: #CEED5E;}";
echo "</style>";


echo "<table border=1>";
    echo "<tr><th>Product ID</th><th>Title</th><th>Author</th><th>Description</th></tr>";


while ($row = mysqli_fetch_assoc($result))
{
    echo "<tr><td>" . $row["id"] . "</td><td>" . $row["title"] . "</td><td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td>" . $row["description"] . "</td></tr>";

}

echo "</table>";

【问题讨论】：

您的问题是什么？这是否有效？
我的问题应该是个问题

标签： php css colors html-table

【解决方案1】：

echo "<style type='text/css'>";
echo ".normalbackground {background-color: white;}";
echo ".coloredbackground {background-color: #CEED5E;}";
echo "</style>";


echo "<table border=1>";
echo "<tr><th>Product ID</th><th>Title</th><th>Author</th><th>Description</th></tr>";

$i = 0;
while ($row = mysqli_fetch_assoc($result))
{
$i++; if (($i % 2) == 0) {$class = "coloredbackground";} else {$class = "normalbackground";};
echo "<tr><td class="$class">" . $row["id"] . "</td><td class="$class">" . $row["title"] . "</td><td class="$class">" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td class="$class">" . $row["description"] . "</td></tr>";

}

echo "</table>";

【讨论】：

【解决方案2】：

CSS 可以非常轻松地替换颜色表行，而无需在 PHP 代码中执行任何特定操作。

您可以使用 :nth-child 或 :nth-of-type 选择器来实现。

例子：

.mytable tr:nth-child(even) {background: #CCC;}
.mytable tr:nth-child(odd) {background: #FFF;}

另请参阅 W3C 的文档：http://www.w3.org/Style/Examples/007/evenodd.en.html

唯一需要注意的是，IE8 或更早版本不支持此功能。但是所有其他常用的浏览器都使用support it just fine，所以如果你可以在没有 IE6/7/8 支持的情况下生活，那么就这样做，你会没事的。

如果您确实需要支持 IE8 或更早版本，那么您有几个选择。

显而易见的选择就是保留它，让 IE8 为表格行显示单一颜色。它不会阻止人们使用该网站，因此只需将更好看的内容留给更好的浏览器即可。
但是有一些 javascript hack 可以为旧版本的 IE 添加对 :nth-child 选择器的支持。我推荐的最好的是http://selectivizr.com/。现在，即使在较旧的 IE 版本中，您也可以使用高级 CSS。
如果您不想这样做，但确实需要在 IE 中显示行颜色，那么您剩下的唯一选择就是向行添加类。只需为奇数行和偶数行配置两个类，并根据需要将类添加到每一行。这可以在页面加载时在您的 PHP 代码或 JS 代码中完成。不过，这不是理想的解决方案； Selectivizr 更好，因为这意味着其他浏览器不会因为旧 IE 缺乏功能而受到影响。

希望对您有所帮助。

【讨论】：

【解决方案3】：

$i = 0;
while ($row = mysqli_fetch_assoc($result))
{
    echo "<tr ".($i%2 == 1) ? 'style="background-color:red': ''."><td>" . $row["id"] . "</td><td>" . $row["title"] . "</td><td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td><td>" . $row["description"] . "</td></tr>";

$i++;
}

【讨论】：

【解决方案4】：

您需要为每个奇数行或偶数行添加一个特定的类，并将您的 CSS 应用到该类，看看下面的代码 sn-p。

  echo "<style type='text/css'>
            tr {background: #999999;}
            tr.row_odd {background: #EFEFEF;}
        </style>
        <table border=1>
            <tr>
                <th>Product ID</th>
                <th>Title</th>
                <th>Author</th>
                <th>Description</th>
            </tr>
            ";

$count = 0;
while ($row = mysqli_fetch_assoc($result)) {
    echo "<tr".($count%2?'class="row_odd"':'').">
        <td>" . $row["id"] . "</td>
        <td>" . $row["title"] . "</td>
        <td>" . ucwords(strtolower($row["authorFirstName"] . " " . $row["authorLastName"])) . "</td>
        <td>" . $row["description"] . "</td>
    </tr>";

    $count++;
}

echo "</table>";

【讨论】：