html - 如何合并具有不同格式的两列？

Question

我正在尝试用 HTML 生成一个表格，在第一列中包含一些代码示例，行颜色交替，第二列包含注释。

这是我要实现的目标的粗略模型:

这就是我当前的代码产生的结果:

我使用的 HTML 和 CSS 是这些:

    table.codepack {
      margin-left: 250px;
      width: 80%;
    }
    
    col.vba {
      border-left: 1px solid #8bd5e6;
      font-family: Courier, monospace;
      font-size: small:
      padding: 0;
      width: 70%;
    }
    
    col.vba tr:nth-child(odd) {
      background-color: #b8eaef;
    }
    
    col.vba tr:nth-child(even) {
      background-color: #d0eef4;
    }
        
    col.notes {
      width: 30%;
    }
    
    div.comment {
      margin: 3px;
      border: 1px solid #e6b000;
      border-radius: 6px;
      background-color: #fff9e6;
      font-family: Calibri, Arial, sans-serif;
      font-size: small;
      font-style: italic;
    }

<table class=codepack>
  <col class="vba"><col class="notes">
  <tr>
    <td>  Sub Newcode</td>
    <td></td>
  </tr>
  <tr>
    <td>  IF RandomVar = True then</td>
    <td><div class="comment">This is a comment.</div></td>
  </tr>
  <tr>
    <td>  &nbsp;&nbsp;Random2 = Blue</td>
    <td><div class="comment">This is a comment.</div></td>
  </tr>
  <tr>
    <td>  ELSE</td>
    <td></td>
  </tr>
 </table>

有些位正在工作 - 评论 <div> ，例如 - 但我为第一列尝试的所有事情都没有给出好的结果。我试过声明 .vba既独立又特定于tr和 td ，但无济于事。我也尝试过各种版本的声明 nth-child样式，再次没有成功。

知道如何实现该结果吗？我并不拘泥于使用表格 - 事实上，我不想 - 但我想不出更好的方法。

Answer 1

我能想到的最简单的方法是不用担心特定列中的颜色，然后使用 :nth-of-type 确保每行中的第二个单元格的颜色相同。

tr:nth-child(odd) {
  background-color: #b8eaef;
}

tr:nth-child(even) {
  background-color: #d0eef4;
}

td:nth-of-type(even) {
  background-color: #fff;
}

CodePen Here.