HTML table with custom css design - html

Question

What is the proper way to create the table with HTML and CSS like in the image below?
I am struggling with this task for hours now...
The problem is that I don't know how to organize row in the table to have layout like in the image below, all items should be in one row, but I have managed to have all in the separate row.
HTML:
<table class="testTable">
<thead>
<tr>
<th>
<strong>Order</strong>
</th>
<th>
<strong>Operation</strong>
</th>
<th>
<strong>Times</strong>
</th>
<th>
<strong>Quantities</strong>
</th>
<th>
<strong>Date</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bottom-border">Kamera</td>
<td class="bottom-border" style="color: green;">
<strong>PRODUCTION</strong>
</td>
<td class="bottom-border">7:85</td>
<td class="bottom-border" style="color: green;">GOOD</td>
<td class="bottom-border">26.06.2018.</td>
</tr>
<tr>
<td>Kaciga</td>
<td style="color: orange;">Undefined</td>
<td>7</td>
<td style="color: orange;">SCRAP</td>
<td>26.06.2018.</td>
</tr>
<tr>
<td>Ventil</td>
<td style="color: yellow;">Planned</td>
<td>11</td>
<td style="color: yellow;">REWORK</td>
<td>26.06.2018.</td>
</tr>
<tr>
<td>13</td>
<td style="color: red;">UnPlanned</td>
<td>15</td>
<td style="color: red;">Destroyed</td>
<td>26.06.2018.</td>
</tr>
</tbody>
</table>
CSS:
.bottom-border { border-bottom: solid 1px black; }
.testTable{
font-family: Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
/* Define the default color for all the table rows */
.testTable tr{
background: #f7f6f6;
}
/* Define the hover highlight color for the table row */
.testTable tr:hover {
background-color: #6d7272;
}
Thank you

Answer 1

To provide a slightly more constructive answer, for you to use as a starter for 10. You can utilise CSS3 :nth selectors.
For example:
Selecting odd and even rows:
tr:nth-child(even)
tr:nth-child(odd)
Selecting the first two rows:
tr:nth-child(-n+2)
Read more about nth-child()