删除HTML表格中的外边框

kash 发表于 Dev

卡什

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

我可以为上述问题找到解决方案吗？

穆罕默德

这是您可以执行的操作，您只需将不需要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>