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.

Answer 2

除此之外，您还有其他一百万种方法可以做到这一点。（例如，Bootstrap有div.row而不是tr），但是如果你选择当前的代码，你需要为每个td添加一个类，或者使用td的伪选择器。

＆＃13;

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;
    }


td:first-child {background-color: yellow; }

＆＃13;

<table class="codepack" cellpadding="0" cellspacing="0">
  <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>

＆＃13;

请注意，我添加了cellspacing =＆＃34; 0＆＃34;和cellpadding =＆＃34; 0＆＃34;到了最后一点css。

Answer 3

您可以使用display：flex

检查以下代码段

.code {
  display: flex;
  flex-direction: column;
}
.sub-code {
  display: flex;
}
.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;
}
.text {
  border: 1px solid #8bd5e6;
  padding: 0;
  width: 40%;
}

<div class="container">
  <div class="code">
    <code class="text">Sub Newcode</code>

    <div class="sub-code">
      <code class="text">IF RandomVar = True then </code>
      <div class="comment">This is a comment.</div>
    </div>
    <div class="sub-code">
      <code class="text"> Random2 = Blue </code>
      <div class="comment">This is a comment.</div>
    </div>
    <code class="text">ELSE</code>


  </div>
</div>

希望有所帮助

Answer 4

col可以设置宽度，这就是全部。您不能选择td，就好像它们属于某个col或拥有它作为父级。事实并非如此。你必须以某种方式设置第n个col和第2个不同规则的相关方式。

tr没有col元素作为父级（但是作为所有现有col的兄弟...所以你不能在CSS中做任何有用的事情（*））所以你应该从与tr相关的选择器中删除col.vba 例如，您可以使用:nth-child(odd)在每个奇数行的第1列中选择这些单元格，并设置其td:first-child单元格的样式。
（*）col + tr会选择一些内容：tr跟在一个col元素之后，但这些都是在这里，所以没有比一个简单的tr更有用了：）

在这里，我删除了与col和样式相关的任何内容（在他们的相应内容中的单元格）td:first-child和td:last-child的“列”（也适用于td:nth-child(2)，并且如果你有3个以上则有用列）

    table.codepack {
      margin-left: 250px;
      width: 80%;
    }
    
    td:first-child {
      border-left: 1px solid #8bd5e6;
      font-family: Courier, monospace;
      font-size: small:
      padding: 0;
      width: 70%;
    }
    
    td:last-child {
      width: 30%;
    }
    
    tr:nth-child(odd) td:first-child {
      background-color: #b8eaef;
    }
    
    tr:nth-child(even) td:first-child {
      background-color: #d0eef4;
    }
        
    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>

编辑：如果您确实希望宽度为70％/ 30％，无论列中的内容长度如何，您都应该使用其他 table layout algorithm（MDN），即做出什么的作者希望而不是根据其长度修改哪些内容：

table {
  table-layout: fixed;
}

如何组合具有不同格式的两列？

4 个答案: