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

问题描述 投票：0回答：3

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

一切都正常，但问题在于造型。

我的表行颜色被剥离（就像我们使用bootstrap table-striped类一样）并且每行中的单元格不相同。

有些有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

html css
3个回答
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>
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>
-1
投票

尝试给你的行一个id。然后，您应该能够访问css代码中的整行。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.