html - 嵌套表格的边框 - 不需要，有一个

Question

这个让我觉得很愚蠢。我想拆分表格中的某个单元格，并且我希望它没有边框。父表确实有边框，在css中设置:

table, thead, tbody, th, tr, td, input
 {
     clear: both;
     font-size: 11pt;
     padding: 0;
     margin: 0;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
 }
table, thead, tbody, th, tr, td {
    border: 1px solid black;
    border-collapse: collapse;
}

为了拆分所需的单元格，我创建了一个内联样式设置为 border:0 的嵌套表(这里显示了周围的父表，其中只有受影响的 th 和值 td:

<table style="table-layout: fixed;">
  <tbody>
    <tr style="background-color: linen">
        <th>
            <table style="table-layout: fixed; border: 0">
                <tr style="border: 0">
                    <th style="text-align: center;border: 0">
                        <label>NDA</label>
                    </th>
                    <th style="text-align: center;border: 0">
                        @Html.LabelFor(m => m.Mailshot, "Mailshot")
                    </th>
                </tr>
            </table>
        </th>
    </tr>
    <tr style="background-color: linen">
        <td>
            <table style="border: 0">
                <tr style="border: 0">
                    <td style="text-align: center; border: 0;width: 50%">
                        <input type="checkbox" style="border: none" value="@Model.NdaSigned" name="NdaSigned" id="NdaSigned"/>
                    </td>
                    <td style="text-align: center; border: 0;width: 50%">
                        <input type="checkbox" value="@Model.Mailshot" name="Mailshot" id="Mailshot"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  </tbody>
</table>

如您所见，我已经尝试了所有我能想到的方法来确保嵌套表格没有边框。 (PS:border:none 具有相同的非效果)。

然而，这就是它的样子:

我不会非常介意中间有一个 1px 的垂直边框，但我当然不希望单元格内有一个周围的边框。

我做错了什么？

Answer 1

表总是有 tbodies，即使你不写 <tbody>明确地。所以每个内表都有一个边界为1px solid black的tbody根据您的 CSS。

解决方案是将 <tbody style="border:0">在内表中，或删除 tbody来自 css 的选择器。 (后者是首选，因为除非在非常特殊的情况下，否则您实际上不需要一开始就设置 tbodies 的样式。)