更改HTML表格中整行的背景颜色

时间：2019-03-19 15:47:22

标签： html css

我有一个动态表，其中的数据来自API。我正在生成表并使用JavaScript插入行。

一切正常，但问题出在样式上。

我的表行颜色被剥离（就像我们使用引导程序表条纹类一样），并且每行中的单元格都不相同。

有些有3个，有些有6个，有些4个，依此类推。如果单元格较少，它们将显示一些空白。

有什么办法可以给整行着色吗？这是一个例子。这是我的代码示例：

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped>tr:nth-child(n+1)>td {
  background-color: #bababa;
}

.table-striped>tr:nth-child(n+2)>td {
  background-color: #e8e7e6;
}
<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
    </tr>
  </table>
</div>

这里是jsfiddle

3 个答案:

答案 0 :(得分：1)

表格行仅与单元格数一样宽。

在没有整行时添加最后一个单元格，并适当地使用colspan。

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped tr:nth-child(odd) {
  background-color: #bababa;
}

.table-striped tr:nth-child(even) {
  background-color: #e8e7e6;
}
<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td colspan="3"></td>
    </tr>
  </table>
</div>

MDN的注释：

  

应用于<tr>元素的任何样式都会影响其中的单元格   该行，除非被应用于这些单元格的样式所覆盖。

要特别注意它为单元格设置样式的事实，而不是行本身

编辑

从您的问题和评论中我们知道您正在使用javascript生成表。我们无法推断出如何执行此操作，但是如果您逐行生成表格，则应该能够查看是否已为该行生成的单元格数量等于th细胞。如果不是，请添加一个差异为colspan的单元格。如果无法执行此操作，则可以在创建表后 。

这是一个粗糙的方法

function addColspan(table) {
  //Assume number of th are our max cells per row
  var maxCells = table.querySelectorAll("th").length;
  
  //Get all rows but the first
  var rows = table.querySelectorAll("tr:nth-child(n+2)");
  for(var i = 0; i < rows.length; i++){
    //Get how many cells we have
    var cellCount = rows[i].querySelectorAll("td").length;
    //If we don't have enough cells
    if(cellCount < maxCells) {
      //Add one with the appropriate colspan
      rows[i].innerHTML += "<td colspan='" + (maxCells - cellCount) + "'></td>";
    }
  }
}

//Run after table is generated
addColspan(document.querySelector(".table-striped"));
.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped tr:nth-child(odd) {
  background-color: #bababa;
}

.table-striped tr:nth-child(even) {
  background-color: #e8e7e6;
}
<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>

    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
    </tr>
  </table>
</div>

答案 1 :(得分：0)

您可以在CSS中使用even和odd属性。 检查一下

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped tr:nth-child(odd) td {
  background-color: #bababa;
}

.table-striped tr:nth-child(even) td {
  background-color: #e8e7e6;
}
<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
    </tr>
  </table>
</div>

评论后更新了答案。您需要将alteast留空以突出显示完整的行。

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped tr:nth-child(odd) td {
  background-color: #bababa;
}

.table-striped tr:nth-child(even) td {
  background-color: #e8e7e6;
}
<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

答案 2 :(得分：-1)

尝试为您的行指定一个ID。然后，您应该能够在CSS代码中访问整行。

相关问题
最新问题