Style certain rows from database table in html table

Question

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?

Why not add that asterisks in the echo?Or add a class to the td that holds it — Carl Binalla
– Carl Binalla, Commented Mar 10, 2017 at 2:25

Obsidian Age · Accepted Answer · 2017-03-10 02:33:21Z

2

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! :)

edited Mar 10, 2017 at 2:33

answered Mar 10, 2017 at 2:28

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yevgeniy Bagackiy Over a year ago

what if it is not exactly every 3rd row. it can be different. it depends on amount of processes inside each project

Obsidian Age Over a year ago

Then you would need to alter you PHP to assign the class specific to the elements that you wish to target, based on some sort of conditional (which only you would know). Check my second option, which adds the class red to specific rows. You'll need to use that within a condition that specifies which rows to target :)

Yevgeniy Bagackiy Over a year ago

Thanks for an idea.

Collectives™ on Stack Overflow

Style certain rows from database table in html table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related