Question

我正在使用Bootstrap＆＃34;以桌面为边界的＆＃34;用于样式化我的表的类。下面是我的表

 <table class="table table-bordered">
        <tr>
            <td>column1head</td>
            <td>column2head</td>
            <td>column3head</td>
            <td>column4head</td>
            <td>column5head</td>
            <td>column6head</td>
        </tr>
        <tr>
            <form name="form1">
                <td>column1 label</td>
                <td>column2 label</td>
                <td><input type="checkbox" name="row2column3chkbox"></td>
                <td><input type="checkbox" name="row2column4chkbox"></td>
                <td><input type="text" name="row2column5txtbox"></td>
                <td><input type="text" name="row2column6txtbox"></td>
            </form>
        </tr>
        <tr>
            <form name="form2">
                <td>column1 label</td>
                <td>column2 label</td>
                <td><input type="checkbox" name="row3column3chkbox"></td>
                <td><input type="checkbox" name="row3column4chkbox"></td>
                <td><input type="text" name="row3column5txtbox"></td>
                <td><input type="text" name="row3column6txtbox"></td>
            </form>
        </tr>
        <tr>
            <form name="form3">
                <td>column1 label</td>
                <td>column2 label</td>
                <td><input type="checkbox" name="row4column3chkbox"></td>
                <td><input type="checkbox" name="row4column4chkbox"></td>
                <td><input type="text" name="row4column5txtbox"></td>
                <td><input type="text" name="row4column6txtbox"></td>
            </form>
        </tr>
    </table>

每行都是动态创建的，其td包含在表单元素中。这里的问题是每个单元格不会出现第二行边框。它在Mozilla工作，但在IE9工作。如何才能在所有浏览器中使用它。

演示： jsfiddle

Answer 1

出于某种原因，像Chrome这样的浏览器将单元格周围的形式视为空（即，不包围细胞，而是坐在它们上方），从而应用此规则：

.table-bordered > tbody > tr > td

虽然IE9需要它才能工作：

.table-bordered > tbody > tr > form > td

...因为它将表单看作围绕td s，它应该做什么。不知道为什么Chrome等人。看到表单没有包围td个，但我不认为这不是一个非常好的编码实践（虽然验证器似乎并没有反对它）

表格单元格边框不会使用引导程序

1 个答案: