CODEWITHSUNDEEP
htmlcssmysql
Yevgeniy Bagackiy
Yevgeniy Bagackiy

Reputation: 974

Style certain rows from database table in html table

I have a html table received from this query:

SELECT proj_title, CONCAT(projectNo, " ", proj_title) AS title
FROM (
        SELECT projectNo, CONCAT("Project ", title) AS proj_title, 0 AS a FROM project p1
        UNION ALL
        SELECT DISTINCT projectNo, process, 1 AS a FROM process p2
    ) t
ORDER BY projectNo, a, title

And table:

<table class="paginated" style=" margin-right:10%;">
<?php
$header ='<th>Title</th>';
echo "<thead>$header</thead>";
while ($data = mysqli_fetch_assoc($query)) 
{
        $projectNo = $data['proj_title'];


        $body = '<td>'.$projectNo.'</td>';
        echo "<tbody>$body</tbody>";

}
?>    
</table>

The table looks like this:

|     title       |
+-----------------+
| Project test    |
| ANM             |
| BLD             |
| Project test2   |
| ANM KEY         | 
| BLD             |

Is there any way to style only certain rows like: | Project test || Project test2 |

How it can be done?

Upvotes: 1

Views: 247

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

Yes, you certainly can style individual rows in a table with CSS. Your provided structure doesn't actually include any table rows (<tr> elements), so you might want to fix that up first. <tbody> is not a valid child of <td>, and <td> must be contained inside a <tr>.

Once you fix up your table structure, you can target every nth row with the pseudo-selector :nth-of-type:

tr:nth-of-type(3n) {
  color: #f00;
}
<table>
  <tr>
    <td>One</td>
  </tr>
  <tr>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
  <tr>
    <td>Five</td>
  </tr>
  <tr>
    <td>Six</td>
  </tr>
</table>

In the above sample, 3n represents that it should target every third row, and change the colour.

You could also alternatively add a class to the specific rows that you wish to target through PHP itself, and then simply target that class directly with CSS:

echo "<tr class='red'><td>$data</td></tr>";

.red {
  color: #ff0;
}

Hope this helps! :)

Upvotes: 2

Related Questions