具有自定义 css 设计的 HTML 表格

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() 的信息