Form inside table or table inside form,哪个适合有效的 Twitter Bootstrap 标记?

Form inside table or table inside form, which one is the right for valid Twitter Bootstrap markup?

我正在开发一个基于 Twitter Bootstrap 的模板,我有一个疑问,如标题所说:Form inside table 或 table inside form,哪一个适合有效的 Twitter Bootstrap 标记?两者都有效吗?

第一个标记:

<form id="fabForm" method="post">
    <div class="form-group">
        <div class="table-responsive">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th></th>
                        <th>Col Title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="fabLinkChoice[]" value="1">
                                </label>
                            </div>
                        </td>
                        <td>Dist1</td>                           
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div>
        <button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Add</button>
    </div>
</form>

第二个标记:

        <div class="table-responsive">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th></th>
                        <th>Col Title</th>
                    </tr>
                </thead>
                <tbody>
                     <form id="fabForm" method="post">
                         <div class="form-group">
                             <tr>
                                  <td>
                                      <div class="checkbox">
                                           <label>
                                               <input type="checkbox" name="fabLinkChoice[]" value="1">
                                           </label>
                                     </div>
                                 </td>
                                 <td>Dist1</td>                           
                             </tr>
                             <tr>
                                 <td colspan="2">
                                     <button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Add</button> 
                                 </td>
                             </tr>
                        </div>
                    </form>
               </tbody>
            </table>
        </div>
    </div>
<div>

注意: 我的疑问源于 this code。在那里您会注意到第一个示例的代码,它也在 Bootstrap 模态上,但我无法让它看起来很好。这是我在 Chrome:

上看到的

而且我不知道我的标记中是否遗漏了什么。为什么我使用 tables 是因为它是一个表格数据,我认为这是正确的还是我错了?

permitted contents of a tbody tag 是零个或多个 tr 标签,因此您的第二个示例无效 [​​=19=]。

您可以将表单移动到 table 单元格内,但更常见的是您会在表单内看到 table,而不是相反。

从您有限的示例中还可以看出,您可能正在使用 table 进行布局,我建议您重新考虑一下。