Table 表格中包含的行在 css 中被读取为全偶数或全奇数。知道为什么吗？

Question

这是一个奇怪的问题。我将 table 行包装在一个表单中，使该行可点击并通过 post 将数据发送回父页面。这是我的 html 的示例，它是在 php 函数中使用来自 mysql 数据库的数据生成的：

    table.iframetbl {
     width: 90%;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     vertical-align: middle;
     border: 2px solid #000000;
     border-collapse:collapse;
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
     font-size: 8pt;
    }
    table.iframetbl th {
     background-color: #538073;
     color: #F0F0F0;
    }
    table.iframetbl td {
     white-space:break-word;
     max-width:230px;
     font-size:8pt;
    }
    table.iframetbl tr:nth-child(odd) {
     background-color: #FFFFFF;
    }
    table.iframetbl tr:nth-child(even) {
     background-color: #E5E5E5;
    }
    table.iframetbl tr.reg {
     background-color: #F9F180;
    }

<table class="iframetbl" >
      <tr>
        <th>Order #</th>
        <th>Customer#</th>
        <th>Entry Date</th>
      </tr>
      <form id="15002588-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
     <input type="hidden" name="whse" value="15" />
     <input type="hidden" name="ordernum" value="15002588-000" />
     <tr onClick="document.getElementById('15002588-000').submit()">
      <td>15002588-000</td>
      <td>150004</td>
      <td>2016-09-28</td>
     </tr></form>
      <form id="15002587-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
     <input type="hidden" name="whse" value="15" />
     <input type="hidden" name="ordernum" value="15002587-000" />
     <tr onClick="document.getElementById('15002587-000').submit()">
      <td>15002587-000</td>
      <td>150058</td>
      <td>2016-09-28</td>
     </tr></form>
      <form id="15002585-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
     <input type="hidden" name="whse" value="15" />
     <input type="hidden" name="ordernum" value="15002585-000" />
     <tr onClick="document.getElementById('15002585-000').submit()">
      <td>15002585-000</td>
      <td>150044</td>
      <td>2016-09-28</td>
     </tr></form>
      <form id="15002584-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
     <input type="hidden" name="whse" value="15" />
     <input type="hidden" name="ordernum" value="15002584-000" />
     <tr onClick="document.getElementById('15002584-000').submit()">
      <td>15002584-000</td>
      <td>150019</td>
      <td>2016-09-28</td>
     </tr></form>
      <form id="15002583-000" action="/2m/Reports/orderlines.php" target="_parent" method="post">
     <input type="hidden" name="whse" value="15" />
     <input type="hidden" name="ordernum" value="15002583-000" />
     <tr onClick="document.getElementById('15002583-000').submit()">
      <td>15002583-000</td>
      <td>150030</td>
      <td>2016-09-28</td>
     </tr></form>
      </table>

就功能而言，一切正常 - 我可以点击我的行，它将数据发送回父页面，这个 table 是从中生成的，等等。问题是 css更改奇数行和偶数行背景颜色无法正常工作。当我检查元素时，它显示每行为偶数（或奇数，具体取决于浏览器 - IE 和 Chrome 将它们全部显示为奇数，而在 jsfiddle 中它们都是偶数）。如果我从行周围删除表格，css 会读取正确的第 n 个子项并且颜色会起作用。我以前从未运行遇到过这种情况，有人有解决方案吗？

这是fiddle

中的代码

Answer 1

对于未来的访问者，问题在于将 tr 元素包装在 form 中。 form 需要在 tr 内。

Table 表格中包含的行在 css 中被读取为全偶数或全奇数。知道为什么吗？

Table Rows wrapped in a Form are read as all even or all odd in css. Any idea why?

css

forms

css-selectors

css-tables