相关疑难解决方法(0)

我使用这个CSS代码在行中显示数据库输出,其中颜色在每第2行重复

tbody tr:nth-child(2n) td, tbody tr.even td {  
    background: none repeat scroll 0 0 #E5ECF9;  
}

如果我在我的IE中打开它将无法正常工作.有什么建议？

我正在使用IE 8.

我有无限数量的div元素（内容/网格项目）。我希望它们按定义的 CSS 网格列数进行布局。CSS Grid 可以轻松地将它们布置成这样。但是现在随着元素就位，我想以<div>某种方式在结果网格的每隔一行中设置 s 的样式。

可以将其视为将每隔一行的表格样式设置为较深的颜色。

这个问题可以概括为：你可以为 CSS Grid 的任意行/列设置样式吗？

建议情况：

<div class="content-grid">
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    ...

</div>

它的CSS：

.content-grid {
    display: grid;
    grid-template-columns: 77px 77px 77px;
}

.content-grid__item {
    background-color: red;
}

以及理想世界中的首选解决方案：

// pseudocode
.content-grid:nth-row(odd) .content-grid__item {
    background-color: darkred;
}

我的Activity模型有一个循环

<% @activities.each do |activity| %>
<div>
    <div class="cell">
        <%= image_tag(activity.image) %>
    </div>
    <div class="cell">
        <h4><%= activity.title %></h4>
        <p><%= activity.description %></p>
        <span><%= activity.distance %></span>
    </div>
</div>
<% end %>  

我想创建一个zig-zag效果,所以我需要为每个偶数活动重新安排HTML,所以标记将如下所示:

<div>
  <div class="cell">
    <h4><%= activity.title %></h4>
    <p><%= activity.description %></p>
    <span><%= activity.distance %></span>
  </div>
  <div class="cell">
    <%= image_tag(activity.image) %>
  </div>
</div>

有没有办法用if语句做到这一点？像这样的东西:

<% if activity.odd? %>
 <% @activities.each do |activity| %>
   <div>
     <div class="cell">
   <%= image_tag(activity.image) %>
 </div>
 <div class="cell">
   <h4><%= activity.title %></h4>
   <p><%= activity.description %></p>
   <span><%= activity.distance %></span>
 </div>
   </div> …

使用表格时，可以使用第 n 个子选择器轻松替换表格行中的颜色 ( /sf/answers/215902291/ )。使用 Flexbox 布局时是否有类似的方法可以做到这一点？我有以下内容（来自https://philipwalton.github.io/solved-by-flexbox/demos/grids/）：

<div class="Grid">
  <div class="Grid-cell"></div>
  [more divs]
  <div class="Grid-cell"></div>
</div>

.Grid
{
  display: flex;
  flex-wrap: wrap;
}

.Grid-cell
{
  flex: 1;
}

在这种情况下是否可以交替行颜色。澄清一下，没有真正的行，只有弹性框由于换行而创建的虚拟行。

我目前正在使用kable_styling()kableExtra 中的以下内容：

  kable_styling(bootstrap_options = c("striped", "hover", "condensed"))

我可以在 YAML 元数据的 R Markdown 文档中将表格样式设置为 kable，如下所示：

output:
  html_document:
    df_print: kable

但这只是以纯 HTML 输出我的所有表格。我不知道如何将我的应用kable_styling()到所有块。目前我必须在每一块中完整地写出以下内容：

df %>%
  kable() %>%
  kable_styling(bootstrap_options = c("striped", "hover", "condensed"))

问题

如何将 my 应用于kable_styling()所有代码块，而不必将其写在所有代码块中？

我有一张带班级表的表。到目前为止唯一的样式是 table th。我想使用 CSS 值在行的白色和银色之间交替，并为整行悬停银色。有没有人有代码？

<table class='table'>
  <tr>
   <th>heading</th>
   <th>heading 2</th>
   <th>heading 3</th>
  </tr>
  <tr class='table'>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
  </tr>
  <tr class='table'>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
  </tr>
  <tr class='table'>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
  </tr>
</table>

那是 html 示例（因为它是用 php 编写的）

CSS

.table {
background-color: #FFFFFF;
color: #000000;
}

.table th {
background-color: #333333;
color: #FFFFFF;
}

到此为止。寻找用于我猜测表 tr css 的值。

说不同是因为偶数/奇数不起作用&它是动态的php而不是严格的html。

以下是我的表格:

     -----------------------------------
        Sl. No.   :    File No.         :
                  :-----------------------
                  :  Subject1           :
    -------------------------------------
           1.     : 1/2/34-gr           :
                  :----------------------
                  :Nice table           :
----------------------------------------
           2.     : 1/2/34-gr           :
                  :----------------------
                  :Nice table           :
----------------------------------------

等等.......

现在我想要颜色每个奇数Sl的背景.不,但是由于第二列有两行,我使用第n列甚至无法实现.还可以使用其他什么方法？(使用CSS,HTML或JS)

我试图使用Javascript更改两个表的备用行的背景颜色.

我能够使用下面的javascript来做到这一点,但我确信有一种更有效或捷径的方法来使用CSS选择器选择所需的子元素.有人可以帮忙吗？

window.onload = function() {
  var elem = document.getElementsByTagName('table')
  for (let c = 0; c < elem.length; c++) {
    var childElem = elem[c].getElementsByTagName('tr');
    for (let d = 0; d < childElem.length; d = d + 2) {
      childElem[d].classList.add('alt');
    }
  }
}

tr {
  background-color: #fff;
}

.alt {
  background-color: #ccc;
}

<html>

<body>
  <h2>Online Tx</h2>
  <table>
    <tr>
      <td>As You Like It</td>
      <td>Comedy</td>
      <td></td>
    </tr>
    <tr>
      <td>All's Well that Ends Well</td>
      <td>Comedy</td>
      <td>1601</td>
    </tr>
    <tr>
      <td>Hamlet</td>
      <td>Tragedy</td>
      <td>1604</td>
    </tr>
    <tr> …

如何使用CSS2选择HTML表格中的每隔一行？如果那是不可能的,那么CSS3的答案也是受欢迎的.

我也尝试过使用下面的代码。它不适用于这种情况。

table>tbody>tr>td:nth-child(odd){
    background-color: #F2F2F2;
}
table>tbody>tr:nth-child(odd){
    background-color: #FFF !important;
}
table>tbody>tr>td:nth-child(even){
    background-color: #F7F7F7;
}

我试图实现以下条纹模式,但没有一个n-child组合正在解决.任何建议/解决方案来实现这一目标.

我需要为表格中的每一行着色。我希望它看起来像附加的图像 任何想法如何做到这一点？