删除html表格中的外边框答案

【问题标题】：Removing outer border in html table删除html表格中的外边框
【发布时间】：2016-06-04 22:33:03
【问题描述】：

我正在开发 HTML 格式的报告。我在那里有一张桌子。在每个 TD 中，我都有另一张桌子。我想在 td.所以我启用了主表的边框。但是很少有内部表格需要显示单元格边框。但我不希望显示该特定内部表格的外边框。

例如

<table ID="main" >
    <tr>
        <td>
            <table ID="INTER1">
                <tr>
                    <td>Table1 without internal border</td>
                <tr>
            </table>
        </td>
        <td>
            <table ID="INTER2">
                <tr>
                    <td>Table with internal border</td>
                <tr>
            </table>
        </td>
    </tr>
<table>

我想使用 CSS 类来做到这一点。我已经搜索过了，但我找到了适用于所有标签的解决方案，但这意味着它将删除所有表格的外边框。

我能有解决上述问题的方法吗？

【问题讨论】：

你能展示你的 css 并最好在这里创建一个代码 sn-p 或小提琴吗？
"在每个 TD 中，我都有另一张桌子。" — 这通常表明您不应该使用桌子。
在 id 之后选择它（如果我理解正确的话）
你会画画吗？有点困惑
“我想用 CSS 类来做这件事。我已经用谷歌搜索过了，但我找到了适用于所有标签的解决方案。” ——这很奇怪。使用类的全部点是，您不必将某些东西应用于所有元素（甚至是特定类型的所有元素）

标签： html css

【解决方案1】：

不确定您想要什么，因此请查看此内容，也许我们可以逐步解决此问题。根据 Sweeney 先生的说法，您不需要内部表格的边框，但仍需要外部表格的边框。黑色虚线显示了 2 个内部表格边界的位置。代码中有关于如何删除它们的 cmets。

table#main { border: 2px dashed blue; border-collapse: collapse; }
td { border: 1px solid red; height: 80px; }
td table { border: 1px dashed black; }

/* Replace the last line with this one */
/* td table { border: none; } */

<table ID="main" >
    <tr>
        <td>
            <table ID="INTER1">
                <tr>
                    <td>Table1 without internal border</td>
                <tr>
            </table>
        </td>
        <td>
            <table ID="INTER2">
                <tr>
                    <td>Table with internal border</td>
                <tr>
            </table>
        </td>
    </tr>
<table>
  <ul>
  <li>Blue Dashed = Outer Table</li>
  <li>Black Dashed = Inner Table</li>
  <li>Red Solid = Cell</li>

【讨论】：

操作员说：So I have enabled the border of the main table. 但您已将其设置为none？
看标题，你100%确定OP想要什么？如果有，请赐教。 :-)
我认为关键字是 in - 删除表格的外边框 within 表格 - 我同意，但它容易产生误解
实际上，我读得越多我就越困惑哈哈 - 是时候继续前进了 - 我已经推翻了投票
哦，我明白了，所以你是说他想要一种使用课堂作业的方法来选择他想要的边界和他不想要的边界。好吧，先生，可能是对的。我认为解释 OP 的问题是一个比手头的实际问题更受欢迎的话题。给我点赞。

【解决方案2】：

您可以只指定要从中删除边框的表格。像这样：

td table, td table th, td table td {
   border: 0;
}

上面选择了另一个td中的每个table、th和td。最高级别的表将不受影响。

要对表格的每个tds 设置不同的样式，请使用它们的ids。然后执行以下操作：

#INTER1 td {
  border: 0;
}

#INTER2 td {
  border: 1px solid black;
}

如果您有更多 td 元素并且您只想设置其中一个的样式，则可以按照上述方法执行其他方法。

#INTER2 td:nth-of-type(2) {
  border: 1px solid black;
}

【讨论】：

【解决方案3】：

您可以这样做，您只需将n-bordered class 添加到您不想要外部边框的每个表格中。

.border-none {
  border-collapse: collapse;
  border: none;
}

.border-none td {
  border: 1px solid black;
}

.border-none tr:first-child td {
  border-top: none;
}

.border-none tr:last-child td {
  border-bottom: none;
}

.border-none tr td:first-child {
  border-left: none;
}

.border-none tr td:last-child {
  border-right: none;
}

<table class="border-none">
   <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
   </tr>
   <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
   </tr>
   <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
   </tr>
   <tr>
      <td>Cell 10</td>
      <td>Cell 11</td>
      <td>Cell 12</td>
   </tr>
</table>

【讨论】：