在不破坏HTML验证的情况下换行表行？

Question

我有一个表,我想换表行,但问题是我不知道用什么来包装的那些家伙了......如果我使用<div>,<span>,<tr>,<td>...他们都打破我的验证.

那么我可以在不破坏验证的情况下将表格行包装起来？

这就是我希望它看起来的唯一问题是我的HTML无效.
在这里小提琴

我正在使用以下Jquery生成我的包装器

$(document).ready(function(){
$('tr:first').nextUntil('.section2').andSelf().addClass('section1');
$('tr:nth-child(3)').removeClass('section1').addClass('section2');
$('.section2').nextUntil('.section3').removeClass('section1').addClass('section2');

//Lets wrap those two sections inside divs ...
//This will obviously break my validation:(    
$('tr.section1').wrapAll('<div class="section_box1"></div>');
$('tr.section2').wrapAll('<div class="section_box2"></div>');
});

Answer 1

正如@KevinB在注释中所写,tbody元素实际上是在包装器元素中grop表行的唯一方法.在静态标记中,这可能是:

<table class="form-table">

    <tbody class="bg">
        <tr valign="top">
            <th scope="row">Hide Menu Background:</th>
            <td>
                <input type="checkbox" value="value1" name="name1"/>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">
                Menu Background:
            </th>
            <td>
                <input type="file" name=""/>
            </td>
        </tr>
    </tbody>    

    <tbody class="other">
        <tr  valign="top">
            <th  scope="row">Hide Sidebar:</th>
            <td>
                <input type="checkbox" value="value2" name="name2"/>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">Hide Site Title:</th>
            <td>
                <input type="checkbox" value="value3" name="name3" />
            </td>
        </tr>
    </tbody>
</table>

元素上的class属性tbody确实不需要,但它们可以用来使样式更容易一些.

或者,您可能会认为这两个部分在逻辑上并不是同一个表的一部分,而是使用两个单独的table元素.如果您希望第2列从不同位置开始,这实际上是唯一的方法.