使用 <td rowspan ="2"> 时，让 <tr> 表现为单行

Question

所以，我有一个需要显示为 HTML 表格的电子表格，这是一项相当简单的任务，但我发现样式证明相当具有挑战性。电子表格中有数百个条目，因此我想使用斑马条纹来提高可读性。模式应该像下图中的那样，每隔一行的第一个单元格需要跨越两行，而其他单元格跨越三列。当我尝试使用nth-child() 设置<tr> 的样式时，我得到了运行sn-p 时显示的模式。似乎具有rowspan="2" 的行不表现为单行。理想情况下，我希望所有具有相同编号的项目也具有相同的颜色。此问题的任何解决方法？

想要的模式

我的 HTML 和 CSS 代码：

tr:nth-child(odd) {
        background-color: #BDD7EE;
      }
tr:nth-child(even) {
        background-color: #C6E0B4;
      }

`<table>
      <tbody>
        <tr>
          <td rowspan="2">Case1</td>
          <td colspan="3">Issue1</td>
        </tr>
        <tr>
          <td colspan="3">Decision1</td>
        </tr>
        <tr>
          <td rowspan="2">Case2</td>
          <td colspan="3">Issue2</td>
        </tr>
        <tr>
          <td colspan="3">Decision2</td>
        </tr>
        <tr>
          <td rowspan="2">Case3</td>
          <td colspan="3">Issue3</td>
        </tr>
        <tr>
          <td colspan="3">Decision3</td>
        </tr>
        <tr>
          <td rowspan="2">Case4</td>
          <td colspan="3">Issue4</td>
        </tr>
        <tr>
          <td colspan="3">Decision4</td>
        </tr>
      </tbody>
    </table>`

Answer 1

我建议如下：

:root {
  --odd: #BDD7EE;
  --even: #C6E0B4;
}

tr {
  background-color: var(--odd);
}

tr:nth-child(4n + 1),
tr:nth-child(4n + 2) {
  background-color: var(--odd);
}

tr:nth-child(4n + 3),
tr:nth-child(4n + 4) {
  background-color: var(--even);
}

td {
  background-color: inherit;
}

<table>
  <tbody>
    <tr>
      <td rowspan="2">Case1</td>
      <td colspan="3">Issue1</td>
    </tr>
    <tr>
      <td colspan="3">Decision1</td>
    </tr>
    <tr>
      <td rowspan="2">Case2</td>
      <td colspan="3">Issue2</td>
    </tr>
    <tr>
      <td colspan="3">Decision2</td>
    </tr>
    <tr>
      <td rowspan="2">Case3</td>
      <td colspan="3">Issue3</td>
    </tr>
    <tr>
      <td colspan="3">Decision3</td>
    </tr>
    <tr>
      <td rowspan="2">Case4</td>
      <td colspan="3">Issue4</td>
    </tr>
    <tr>
      <td colspan="3">Decision4</td>
    </tr>
  </tbody>
</table>`

JS Fiddle demo

或者，假设<table> 中允许有多个<tbody> 元素，则有可能：

:root {
  --odd: #BDD7EE;
  --even: #C6E0B4;
}

tbody:nth-child(odd) {
  background-color: var(--odd);
}

tbody:nth-child(even) {
  background-color: var(--even);
}

<table>
  <tbody>
    <tr>
      <td rowspan="2">Case1</td>
      <td colspan="3">Issue1</td>
    </tr>
    <tr>
      <td colspan="3">Decision1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Case2</td>
      <td colspan="3">Issue2</td>
    </tr>
    <tr>
      <td colspan="3">Decision2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Case3</td>
      <td colspan="3">Issue3</td>
    </tr>
    <tr>
      <td colspan="3">Decision3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Case4</td>
      <td colspan="3">Issue4</td>
    </tr>
    <tr>
      <td colspan="3">Decision4</td>
    </tr>
  </tbody>
</table>`

JS Fiddle demo.

如果您能够摆脱 <table> 布局，另一种选择是使用列表和 CSS Grid，例如：

/* defining the CSS properties here: */
:root {
  --odd: #BDD7EE;
  --even: #C6E0B4;
}

/* a simple CSS reset: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

ol {
  /* to allow for better styling, we're using a CSS
     counter in place of the default counter, and
     here we set the <ol> element(s) to reset the
     counter ('listCount') that we're using: */
  counter-reset: listCount;
  /* removing the default list-style: */
  list-style: none;
  width: 80vw;
}

li {
  /* using Grid layout: */
  display: grid;
  /* defining the named grid areas: */
  grid-template-areas:
    "index issue"
    "index description";
  /* defining the gap between rows (0.5em) and columns
     (0.3em) */
  gap: 0.5em 0.3em;
  /* defining the column widths: */
  grid-template-columns: 2rem 1fr;
  /* defining the margins around the <li> element in
     the block axis (top and bottom in a left-to-right,
     top-to-bottom language): */
  margin-block: 0.5em;
}

li::before {
  /* setting the counter as the content (followed by
     a period) in decimal format: */
  content: counter(listCount, decimal) '. ';
  /* incrementing the listCount counter */
  counter-increment: listCount;
  /* assigning the ::before pseudo-element to appear in
     the 'index' named grid area: */
  grid-area: index;
}

/* setting the --odd background for those elements matched
   by the selectors: */
li:nth-child(odd)::before,
li:nth-child(odd)>* {
  background-color: var(--odd);
}

li:nth-child(even)::before,
li:nth-child(even)>* {
  background-color: var(--even);
}

<ol class="reports">
  <li>
    <h2 class="issue">Issue 1</h2>
    <div class="description">Description 1</div>
  </li>
  <li>
    <h2 class="issue">Issue 2</h2>
    <div class="description">Description 2</div>
  </li>
  <li>
    <h2 class="issue">Issue 3</h2>
    <div class="description">Description 3</div>
  </li>
  <li>
    <h2 class="issue">Issue 4</h2>
    <div class="description">Description 4</div>
  </li>
  <li>
    <h2 class="issue">Issue 5</h2>
    <div class="description">Description 5</div>
  </li>
  <li>
    <h2 class="issue">Issue 6</h2>
    <div class="description">Description 6</div>
  </li>
  <li>
    <h2 class="issue">Issue 7</h2>
    <div class="description">Description 7</div>
  </li>
  <li>
    <h2 class="issue">Issue 8</h2>
    <div class="description">Description 8</div>
  </li>
  <li>
    <h2 class="issue">Issue 9</h2>
    <div class="description">Description 9</div>
  </li>
  <li>
    <h2 class="issue">Issue 10</h2>
    <div class="description">Description 10</div>
  </li>
</ol>

JS Fiddle demo.

参考资料：

• :nth-child()。