Php 使用CSS设置数据库查询集数据中某些表行的样式

Php 使用CSS设置数据库查询集数据中某些表行的样式,php,css,mysql,html-table,Php,Css,Mysql,Html Table,我在MySQL数据库中有一组数据。我使用PHP循环从这些数据创建了一个表。我想以特定的方式设置某些行的样式。例如,从数据库中获取的数据按2、3、4、5行分组。有大约25行的数据,我希望每个组的样式有点不同,例如,为行标题添加颜色 我建立了这个,并没有完全考虑到这种风格是必要的。客户想要这种款式,现在我想知道怎么做 下面是Excel中的一张图片,其中包含了我试图完成的工作: 我可以手工编写HTML,然后对其进行样式化,但使用PHP循环时,代码更干净、更紧凑。此外,如果我能弄明白这一点,我可以将其

我在MySQL数据库中有一组数据。我使用PHP循环从这些数据创建了一个表。我想以特定的方式设置某些行的样式。例如,从数据库中获取的数据按2、3、4、5行分组。有大约25行的数据,我希望每个组的样式有点不同,例如,为行标题添加颜色

我建立了这个,并没有完全考虑到这种风格是必要的。客户想要这种款式,现在我想知道怎么做

下面是Excel中的一张图片,其中包含了我试图完成的工作:

我可以手工编写HTML,然后对其进行样式化,但使用PHP循环时,代码更干净、更紧凑。此外,如果我能弄明白这一点,我可以将其用作其他场景的模型和模板,在这些场景中,我需要根据更多数据设置表的某些部分的样式

以下是PHP代码片段:

<table>
    <tr>
        <th>hd1</th>
        <th>hd2</th>
        <th>hd3</th>
    </tr>

    <?php

    $mysqli = <connect to db is fine>;

    $query = 'SELECT a, b, c from t1';

    if($stmt = mysqli_prepare($mysqli, $query)) {
        mysqli_stmt_execute($stmt);
        mysqli_stmt_bind_result($stmt, $a, $b, $c);

        while (mysqli_stmt_fetch($stmt)) {
            echo '<tr>';
            echo '<td>' . $a . '</td>';
            echo '<td>' . $b . '</td>';
            echo '<td>' . $c . '</td>'; 
            echo '</tr>';       
        }
    }

    ?>

</table>

hd1
hd2
hd3

对于每一组不同的行,您可以添加一个类来设置php中每一行的样式。然后根据每个类使用css样式

例如,给标题行设置一个类
blueHeading
,然后在css中将
背景色
属性设置为蓝色


这基本上就是html类属性的作用。

只需检查循环中副标题的名称并给td的背景上色即可

if($subheading == 'foo') {
    echo '<td class="foo">';
}
if($subheading==“foo”){
回声';
}

在本部分代码中,为您的子标题添加一个类:

$subheadingsContent = array("a", "sub heading", "cell data");

while (mysqli_stmt_fetch($stmt)) {


    if(in_array($a, $subheadingsContent)) echo '<tr class="subheading">';

    echo '<td>' . $a . '</td>';
    echo '<td>' . $b . '</td>';
    echo '<td>' . $c . '</td>'; 
    echo '</tr>';       
}

请提供您的PHP代码,这是非常直接的。这是一个样板PHP
while
循环。没什么特别的。。。我将添加代码片段。是否要根据单元格的内容设置行的样式?MySQL表的外观如何?有没有办法知道什么时候应用某种样式?我最终使用了特定的测试和唯一的类,效果很好-非常感谢。@nicorellius我添加了一个值数组,您可以检查这个数组中是否有$a。
 .subheading:nth-child(1){background-color:blue;}
 .subheading:nth-child(2){background-color:orange;}
 .subheading:nth-child(3){background-color:gray;}