php - 偶数和奇数规则的问题

Question

简单的表格 CSS：

#customers {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
#customers tr:nth-child(even) {background: #CCC}
#customers tr:nth-child(odd) {background: #FFF}
#customers caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

#customers tr {
  background-color: white;
  padding: .35em;
  border-bottom: 1px #cdcdcd solid;
}

@media (min-width: 768px) {
#customers tr:hover {
    background-color: #3b458e;
}
}

    
#customers thead tr:hover {
  background-color: #fff;
}

#customers th,
#customers td {
  padding: .625em;
  text-align: center;
}

#customers th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media screen and (max-width: 600px) {
  #customers {
    border: 0;
  }

  #customers caption {
    font-size: 1.3em;
  }
  
  #customers thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  #customers tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  #customers td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  #customers td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  #customers td:last-child {
    border-bottom: 0;
  }
}

<table id="customers">
  <thead>
    <tr>
      <th scope="col">SKU</th>
      <th scope="col">Image</th>
      <th scope="col">EAN</th>
      <th scope="col">Brand</th>
      <th scope="col">Name</th>
      <th scope="col">Size</th>
      <th scope="col">Leadtime</th>
      <th scope="col">MSRP</th>
      <th scope="col">Price</th>
      <th scope="col">Qty</th>
      <th scope="col">Total</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
</table>
<table id="customers">
  <tbody>
    <tr>    
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>  
</tr>
    <tr>    
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>
<td>test1</td>  
</tr>
  </tbody>
</table>

在我的桌子上，其他<tr>的都是灰色的。

为此，我使用功能：

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

好的，所以一切都很好。但如您所见，在上表中，我手动添加了两<tr>行。

但是在实时网站上，我只使用一个，对于重复记录，我使用 php function foreach。

不幸的是，在这种情况下，复制<tr>的不是彩色的。有没有人有任何解决方案？

    #customers {
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      width: 100%;
      table-layout: fixed;
    }
    #customers tr:nth-child(even) {background: #CCC}
    #customers tr:nth-child(odd) {background: #FFF}
    #customers caption {
      font-size: 1.5em;
      margin: .5em 0 .75em;
    }

    #customers tr {
      background-color: white;
      padding: .35em;
      border-bottom: 1px #cdcdcd solid;
    }

    @media (min-width: 768px) {
    #customers tr:hover {
        background-color: #3b458e;
    }
    }

        
    #customers thead tr:hover {
      background-color: #fff;
    }

    #customers th,
    #customers td {
      padding: .625em;
      text-align: center;
    }

    #customers th {
      font-size: .85em;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    @media screen and (max-width: 600px) {
      #customers {
        border: 0;
      }

      #customers caption {
        font-size: 1.3em;
      }
      
      #customers thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }
      
      #customers tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
      }
      
      #customers td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
      }
      
      #customers td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }
      
      #customers td:last-child {
        border-bottom: 0;
      }
    }

So our table on live:

    <table id="customers">
          <thead>
            <tr>
              <th scope="col">SKU</th>
              <th scope="col">Image</th>
              <th scope="col">EAN</th>
              <th scope="col">Brand</th>
              <th scope="col">Name</th>
              <th scope="col">Size</th>
              <th scope="col">Leadtime</th>
              <th scope="col">MSRP</th>
              <th scope="col">Price</th>
              <th scope="col">Qty</th>
              <th scope="col">Total</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
        </table>
    <?php foreach ($_productCollection as $_product): ?>
    <table id="customers">
      <tbody>
        <tr>    
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>
    <td>test1</td>  
        </tr>
      </tbody>
    </table>    
     <?php endforeach; ?>

实时结果：

标签： phphtmlhtml-table

Answer 1

您正在生成多个表，但您似乎希望根据所需的 HTML 示例在同一个表中生成多行：

<table id="customers">
  <tbody>
<?php foreach ($_productCollection as $_product): ?>
    <tr>    
      <td>test1</td>
      <td>test1</td>
      <td>test1</td>
      <td>test1</td>
      <td>test1</td>
    </tr>
<?php endforeach; ?>
 </tbody>
</table>