Question

我正在用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类做到这一点。我用google搜索了但是我找到了适用于所有标签的解决方案，但这意味着它将删除所有表格的外边框。

我可以解决上述问题吗？

Answer 1

以下是您可以执行此操作的方法，您只需将n-bordered class添加到您不希望外边框的每个表格中。

		#main{
			border: 1px solid blue;
			padding: 10px;
		}

		.bordered, .n-bordered{
			border: 1px solid black;
			border-collapse: collapse;	
		}

		.n-bordered{
			border: none;
		}

		.bordered td, .n-bordered td{
			border: 1px solid black;
		}

		.n-bordered tr:first-child td{
			border-top: none;
		}

		.n-bordered tr:last-child td{
			border-bottom: none;
		}

		.n-bordered tr td:first-child{
			border-left: none;
		}

		.n-bordered tr td:last-child{
			border-right: none;
		}

<table id="main">
    <tr>
        <td>
            <table ID="INTER1" class="n-bordered">
                <tr>
                    <td>no-internal border</td>
                    <td>no-internal border</td>
                </tr>
                <tr>
                    <td>no-internal border</td>
                    <td>no-internal border</td>
                </tr>
                <tr>
                    <td>no-internal border</td>
                    <td>no-internal border</td>
                </tr>
                <tr>
                    <td>no-internal border</td>
                    <td>no-internal border</td>
                </tr>
            </table>
        </td>
        <td>
            <table ID="INTER2" class="bordered">
                <tr>
                    <td>yes-internal border</td>
                    <td>yes-internal border</td>
                </tr>
                <tr>
                    <td>yes-internal border</td>
                    <td>yes-internal border</td>
                </tr>
                <tr>
                    <td>yes-internal border</td>
                    <td>yes-internal border</td>
                </tr>
                <tr>
                    <td>yes-internal border</td>
                    <td>yes-internal border</td>
                </tr>                
            </table>
        </td>
    </tr>
<table>

Answer 2

不确定你想要什么，所以请回顾一下，也许我们可以逐步解决这个问题。根据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>

Answer 3

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

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

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

要以不同方式设置表格的每个td的样式，请使用他们的id。然后做一些事情：

#INTER1 td {
  border: 0;
}

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

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

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

删除html表中的外边框

3 个答案: