Question

我有一个表，其中包含用br分隔的单元格中的4行。我用br标签做，因为所有行应该具有相同的背景颜色。但是如果屏幕很小，它会自动换行。所以现在我的想法是将每一行设置在一个单独的tr和td标签中，但我怎样才能给它们相同的背景颜色？

在此帖中回答

这是我的示例，它使用表条带动态显示最多三个TR元素。

<tr>
    <td width="30%">
      Question1<br />
      Question2<br />
      Question3<br />
      Question4
    </td>

   <td>
      Answer1<br />
      Answer2<br />
      Answer3<br />
      Answer4
   </td>
</tr>

这里我从完整的表中获得了片段，三个博客之后的以下行应该用正确的颜色条纹。

<table class="table table-striped">
 <tr> <!-- First paired Block White Background-->
    <td width="30%">
      Question1<br />
      Question2<br />
      Question3<br />
      Question4
    </td>           
   <td>
      Answer1<br />
      Answer2<br />
      Answer3<br />
      Answer4
   </td>
</tr>
 <tr> <!-- IF given show Second paired Block Grey Background-->
    <td width="30%">
      Question1<br />
      Question2<br />
      Question3<br />
      Question4
    </td>           
   <td>
      Answer1<br />
      Answer2<br />
      Answer3<br />
      Answer4
   </td>
</tr>
 <tr> <!-- IF given show Thirth paired Block White Background-->
    <td width="30%">
      Question1<br />
      Question2<br />
      Question3<br />
      Question4
    </td>           
   <td>
      Answer1<br />
      Answer2<br />
      Answer3<br />
      Answer4
   </td>
</tr>
<tr> <!-- grey Background if third block above is showing else white background-->
    <td width="30%">Other content</td>
    <td>other content</td>
</tr>
<tr> <!-- grey Background if row above is white else grey background-->
    <td width="30%">Other content</td>
    <td>other content</td>
</tr>
</table>

更新和回答（无法使用答案功能）：感谢大家，您的所有示例都非常有用！现在我将所有块的颜色设置为灰色，然后在每个块之后插入一个空的tr，以便在每一行中使用表条带类。

<table class="table table-striped">
<tr>
        <td width="30%" style="background: #f9f9f9;">Question1</td>
        <td style="background: #f9f9f9;">Answer1</td>
</tr>
<tr>
    <td width="30%" style="border: 0px; background: #f9f9f9">Question2</td>
    <td style="border: 0px; background: #f9f9f9;">Answer2</td>
</tr>
<tr>
    <td width="30%" style="border: 0px; background: #f9f9f9;">Question3</td>
    <td style="border: 0px; background: #f9f9f9;">Answer3</td>
</tr>
<tr>
    <td width="30%" style="border: 0px; background: #f9f9f9;">Question4</td>
    <td style="border: 0px; background: #f9f9f9; padding-top: 0px;">Answer4</td>
</tr>
<tr></tr><!-- Set automatic bg color with table-striped -->
<tr>
        <td width="30%" style="background: #fff;">Question1</td>
        <td style="background: #fff;">Answer1</td>
</tr>
<tr>
    <td width="30%" style="border: 0px; background: #fff">Question2</td>
    <td style="border: 0px; background: #fff;">Answer2</td>
</tr>
<tr>
    <td width="30%" style="border: 0px; background: #fff;">Question3</td>
    <td style="border: 0px; background: #fff;">Answer3</td>
</tr>
<tr>
    <td width="30%" style="border: 0px; background: #fff;">Question4</td>
    <td style="border: 0px; background: #fff; padding-top: 0px;">Answer4</td>
</tr>
<tr></tr><!-- Set automatic bg color with table-striped -->
<tr>
    <td width="30%">other</td>
    <td>content</td>
</tr>
</table>

Answer 1

您可以向tr添加背景属性：

table {
    border-collapse: collapse; /* to remove gaps between rows and cells */
}

table tr {
  background: lightblue;
}

<table>
  <tr>
    <td>
      Question1</td>
    <td>
      Answer1</td>
  </tr>
  <tr>
    <td>
      Question2</td>
    <td>
      Answer2</td>
  </tr>
  <tr>
    <td>
      Question3</td>
    <td>
      Answer3</td>
  </tr>
</table>

Answer 2

将question和answer类添加到td元素，例如

<table>
  <tr>
    <td class="question">
      Question1
    </td>
    <td class="answer">
      Answer1
    </td>
  </tr>
  <tr>
    <td class="question">
      Question2</td>
    <td class="answer">
      Answer2</td>
  </tr>
  <tr>
    <td class="question">
      Question3
    </td>
    <td class="answer">
      Answer3
    </td>
  </tr>
</table>

然后在CSS中你可以写：

td .question {
  background-color: red;
}

td .answer {
  background-color: blue;
}

问题更新后修改：

将行odd和even添加到每行

<table class="table table-striped">
  <tr class="even"> <!-- First paired Block White Background-->
      <td width="30%">
        Question1<br />
        Question2<br />
        Question3<br />
        Question4
      </td>           
    <td>
        Answer1<br />
        Answer2<br />
        Answer3<br />
        Answer4
    </td>
  </tr>
  <tr class="odd"> <!-- IF given show Second paired Block Grey Background-->
      <td width="30%">
        Question1<br />
        Question2<br />
        Question3<br />
        Question4
      </td>           
    <td>
        Answer1<br />
        Answer2<br />
        Answer3<br />
        Answer4
    </td>
  </tr>
  <tr class="even"> <!-- IF given show Thirth paired Block White Background-->
      <td width="30%">
        Question1<br />
        Question2<br />
        Question3<br />
        Question4
      </td>           
    <td>
        Answer1<br />
        Answer2<br />
        Answer3<br />
        Answer4
    </td>
  </tr>
  <tr class="odd"> <!-- grey Background if third block above is showing else white background-->
      <td width="30%">Other content</td>
      <td>other content</td>
  </tr>
  <tr class="even"> <!-- grey Background if row above is white else grey background-->
      <td width="30%">Other content</td>
      <td>other content</td>
  </tr>
</table>

然后在CSS中你可以写：

tr .even {
  background-color: white;
}

tr .odd {
  background-color: grey;
}

Answer 3

哦，我明白了。这只是使用css odd和even：

的情况

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

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

表剥离为特殊tr设置相同的背景颜色

3 个答案: