含form元素的HTML表格为何无法显示隔行变色效果？

我编写了一段HTML代码，预期实现表格的隔行变色（stripped rows）效果，但实际所有行都显示背景色；移除form标签后，隔行变色效果正常显示。请问如何在保留form标签的前提下实现表格隔行变色？

原代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

   <style type="text/css">
        .table-striped>tbody>tr:nth-child(odd)>td,
        .table-striped>tbody>tr:nth-child(odd)>th {
         background-color:  rgba(7, 114, 244, 0.52);
        }
    </style>

</head>

<body>
<div class="container">

<h3>Table list</h3><br>
    <table class="table table-striped">
        <tr>
        <th>Press</th>
        <th>Code</th>
        <th>Maintenance</th>
        <th>Due Date</th>
        <th>ID</th>
        <th>Done By</th>
        <th>Finished</th>
        <th>Not Finished</th>
        </tr>
    
        <form action="a.php" method="POST">
        <tr>
        <td><center>AUX</center></td>
        <td><center>TOOLS</center></td>
        <td><center>Tools checking and arrangement</center></td>
        <td><center>2023-09-01</center></td>
        <td> <input  class="form-control" type="number" name="id" value="49" required ></center></td>
        <td> <input   class="form-control" type="text" name="user" maxlength="20"></center></td>
        <td style="display:none"><input type="hidden" name="hidd" value="TOOLS"> </td>
        <td><center><input type="submit" value="Done" name="done"></center></td>
        <td><center><input  type="submit" value="Not done" name="not"></center></td>
        </tr>
        </form>
                
                
        
        <form action="a.php" method="POST">
        <tr>
        <td><center>A Press</center></td>
        <td><center>PRESS-A</center></td>
        <td><center>Press main inlet airline filter cleaning</center></td>
        <td><center>2023-09-02</center></td>
        <td> <input  class="form-control" type="number" name="id" value="58" required ></center></td>
        <td> <input   class="form-control" type="text" name="user" maxlength="20"></center></td>
        <td style="display:none"><input type="hidden" name="hidd" value="PRESS-A"> </td>
        <td><center><input type="submit" value="Done" name="done"></center></td>
        <td><center><input  type="submit" value="Not done" name="not"></center></td>
        </tr>
        </form>
    </table>

</div>
</body>

</html>

问题根源 #

HTML标准规定，<table>的直接子元素只能是<thead>、<tbody>、<tfoot>或<tr>，不能直接嵌套<form>标签。浏览器解析时会自动修正非法结构，导致<tr>的层级被打乱，原CSS中>tbody>tr:nth-child(odd)这种直接子元素选择器无法正确匹配目标行，最终隔行变色逻辑失效。

解决方案 #

方案1：修正HTML结构（推荐，符合标准）

把<form>的逻辑整合到表格行内，可使用HTML5的formaction属性让提交按钮直接指定提交地址，无需包裹整个行：

<table class="table table-striped">
  <tr>
    <th>Press</th>
    <th>Code</th>
    <!-- 省略其余表头 -->
  </tr>
  <tr>
    <td><center>AUX</center></td>
    <td><center>TOOLS</center></td>
    <!-- 省略其余单元格 -->
    <td><center><input type="submit" value="Done" name="done" formaction="a.php" method="POST"></center></td>
    <td><center><input type="submit" value="Not done" name="not" formaction="a.php" method="POST"></center></td>
  </tr>
  <!-- 其余数据行同理修改 -->
</table>

也可以将<form>放在表格外部，给表单元素添加form属性关联：

<form id="mainForm" action="a.php" method="POST"></form>

<table class="table table-striped">
  <!-- 表头省略 -->
  <tr>
    <td><center>AUX</center></td>
    <td><input class="form-control" type="number" name="id" value="49" required form="mainForm"></td>
    <!-- 其余表单元素都添加form="mainForm" -->
    <td><center><input type="submit" value="Done" name="done" form="mainForm"></center></td>
  </tr>
</table>

方案2：调整CSS选择器（不修改结构的临时方案）

移除选择器中的直接子元素限制（去掉>），让选择器匹配<tbody>下所有后代<tr>，按整体顺序计数奇偶行：

.table-striped>tbody tr:nth-child(odd)>td,
.table-striped>tbody tr:nth-child(odd)>th {
  background-color: rgba(7, 114, 244, 0.52);
}

注意：这种方案依赖浏览器的结构修正结果，不同浏览器可能存在差异，优先推荐方案1。

内容的提问来源于stack exchange，提问作者vkkindia