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

Posted 2021-05-04

这个让我感到愚蠢。我想在表格中拆分某个单元格，我希望它没有边框。父表有一个边框，在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>

正如您所看到的，我已经尝试了所有我能想到的东西，以确保嵌套表没有边框。 （P.S：border：none具有相同的无效效果）。

然而，这就是它的样子：

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

我究竟做错了什么？

答案

表格总是有tbodies，即使你没有明确地写<tbody>。因此，根据你的css，每个内部表都有一个带有1px solid black边框的tbody。

解决方案是将<tbody style="border:0">放在内部表中，或者从css中删除tbody选择器。 （后者是首选，因为除非在非常特殊的情况下，你实际上不需要首先设置tbodies样式。）