HTML таблица с индивидуальным дизайном CSS

Question

Как правильно создать таблицу с HTML и CSS, как показано на рисунке ниже? Я часами борюсь с этой задачей ... Проблема в том, что я не знаю, как организовать строку в таблице так, чтобы она имела макет, как на рисунке ниже, все элементы должны быть в одной строке, но мне удалось разместить все в отдельной строке.

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;
}

Спасибо

Answer 1

Чтобы дать немного более конструктивный ответ, вы можете использовать его как стартер для 10. Вы можете использовать CSS3 :nth селекторы.

Например:

Выбор нечетных и четных строк:

tr:nth-child(even)
tr:nth-child(odd)

Выбор первых двух строк:

tr:nth-child(-n+2)

Подробнее о nth-child()