在HTML表格中去除外边框

Question

在HTML表格中去除外边框

9

我正在开发一个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类来解决这个问题。我在谷歌上搜索了，但是找到的解决方案将适用于所有的table标签，这意味着它将删除所有表格的外边框。

请问我能否获得上述问题的解决方案？

- Kash

2

你能展示一下你的CSS代码吗？最好在这里或者Fiddle上创建一个代码片段。 - StudioTime

3

在每个“TD”中都有另一个表格。通常这意味着你不应该使用表格。 - Quentin

如果我正确理解了您的要求，那么请仅返回翻译后的文本。 - sTx

你会画图吗？不过我有点困惑。 - Fiido93

我想使用CSS类来实现这个。我已经在谷歌上搜索过了，但是我找到的解决方案将适用于所有标签，这很奇怪。使用类的整个目的就是不要将某些东西应用于所有元素（甚至是特定类型的所有元素）。 - Quentin

显示剩余5条评论

3个回答

3

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

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>

- zer00ne

楼主说：“所以我已经启用了主表的边框。”但是你把它设置为“无”？ - StudioTime

看看标题，你百分之百确定 OP 想要什么吗？如果是的话，请启发我。 :-) - zer00ne

我认为关键词是 in - 在表格内部删除外边框 - 不过我同意，这容易被误解。 - StudioTime

其实，我读得越多就越困惑哈哈 - 是时候继续前进了 - 我已经取消了反对票。 - StudioTime

1

哦，我明白了，你的意思是他想要一种使用类分配来选择他想要和不想要的边框的方法。嗯，先生，你可能是对的。我认为解释OP的问题比实际问题更受欢迎。我给你点赞。 - zer00ne

显示剩余3条评论

1

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

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

上述选择器选取了另一个内的每个、

和

。最高级别的表格不会受到影响。

要为表格中的每个

应用不同的样式，请使用它们的。然后执行以下操作：

#INTER1 td {
  border: 0;
}

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

如果您有更多的td元素，但只想为其中一个设置样式，您可以按照上述方法进行另一种尝试。

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

- Chris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Muhammad · Accepted Answer

以下是如何实现它的方法，您只需要在不想要外部边框的每个表格中添加 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>