Question

我目前有这张表：

Table

使用以下标记：

<table border="1" cellpadding="3">
    <thead>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
    </tbody>
</table>

我目前无法移除左下角td元素的外边框。我画红线的地方有一个边框，但我不想要它们。

有没有简单的方法去除它？

编辑：

预期结果：

Expected Table

Answer 1

实现你的期望有点棘手，我有一些工作

但是如果你想要确切的输出你可能需要摆脱表并使用div，span等与一些css

请检查这个小提琴，看它是否有帮助 fiddle demo

<table>
<thead>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</thead>
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="3" style="border: 0;"></td>
        <td colspan="2"></td>
        <td></td>
    </tr>
</tbody>

td {
    padding: 10px 20px;
    border: 2px solid gray;
}

Answer 2

您可以在代码中提供特定的td ID，然后使用CSS删除边框：

border-left: none;
border-bottom: none;

Answer 3

您的要求有点棘手。你无法实现这一目标。但是你可以使用一些额外的代码实现这一点。我们的想法是在该特定表格列上创建一个div，将左右边框指定为白色文本。将边距指定为负值，以便隐藏原始表格边框。

<强> HTML：

 <table cellpadding="3" border="1">
<thead>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
</thead>
<tbody>
    <tr>
        <td>11</td>
        <td>22</td>
        <td>33</td>
        <td>44</td>
        <td>55</td>
        <td>66</td>
    </tr>
    <tr>
        <td colspan="3" style="border:0px; border-top:1px solid #000; border-right:1px solid #000;"><div style="margin-left:-6px; border:1px solid #fff; margin-bottom:-6px; height:100%;">
            <div style="padding:5px">te</div>

        </div></td>
        <td colspan="2">as</td>
        <td>bs</td>
    </tr>
</tbody>
</table>

JSFIDDLE DEMO

Answer 4

所以，如果你仍然感兴趣的话。以下是使用:after的想法。

Have a fiddle!

CSS

table {
    border: solid 1px #000;
}
td {
    border: solid 1px #000;
    padding: 20px;
    width: 100px;
}
.borderless {
    border: none;
    position: relative;
}
.borderless:after {
    content:"";
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    display: block;
    height: 62px;
    width: 287px;
    position: absolute;
    top: 0;
    left: -3px;
    background: #FFF;
}

HTML

<table>
    <thead>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" class="borderless">Content</td>
            <td colspan="2">Content</td>
            <td>Content</td>
        </tr>
    </tfoot>
</table>

Answer 5

<table border="1" cellpadding="3">
    <thead>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
    </tbody>
</table>




td {
    padding: 10px 20px;
    border: 1px solid #000;
}
td[colspan="3"] { 
    border:none;
    position:relative;
}
td[colspan="3"]:after {
     content:"";
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    display: block;
    height: 24px;
    width: 132px;
    position: absolute;
    top: 0;
    left: -3px;
    background: #FFF;
}

Demo success

enter image description here

删除td的外边框

5 个答案: