Question

我需要从htmltable的最后一列中删除边框线。我在表格的最后一个“列”（td）上尝试了这个：

<td class="nobordercell">Comments</td>

.nobordercell {
  border: none;
}

我也试过这个（border-collapse：collapse）：

<table class="middletable" border="1">
    <tr>
        . . .
        <td name="airfaredate1Comments" id="airfaredate1Comments" class="nobordercell">Comments</td>
    </tr>
    . . .

.middletable{
    width:99%;
    float:left;
    border-collapse:collapse;
}

边界消失的唯一边缘是底部。我意识到这是因为仍然显示的边框属于表，而不是td，但仍然需要知道如何从htmltable中删除边框仅限于td边框与其相交的部分（或如果显示td的边框，它将相交。

目前的情况如下：

......这就是我想要的样子：

Answer 1

您可以使用：last-child selector：

table tr td:last-child {
border: none;
}

http://www.w3schools.com/cssref/sel_last-child.asp

Answer 2

一些简单的CSS和安排应该有助于做到这一点，包括一个JSFiddle。此外，还必须从HTML表格标记中删除边框：

.middletable{
    width:99%;
    float:left;
    border:none;
    border-collapse:collapse;
}

.bordercell{
    border:1px solid black;
}

.nobordercell {
  border: none;
}

<table class="middletable">
    <tr>
        <td name="airfaredate1Comments" id="airfaredate1Comments" class="bordercell">Comments</td>
                <td class="nobordercell">Comments</td>
    </tr>
        <tr>

        <td name="airfaredate1Comments" id="airfaredate1Comments" class="bordercell">Comments</td>
                    <td class="nobordercell">Comments</td>
    </tr>

        <tr>
        <td name="airfaredate1Comments" id="airfaredate1Comments" class="bordercell">Comments</td>
                    <td class="nobordercell">Comments</td>
    </tr>


</table>

https://jsfiddle.net/0v9vdd58/

Answer 3

您可以使用CSS3 :last-of-type选择器。

.middletable{
    width:99%;
    float:left;
    border-collapse:collapse;
}

.middletable td{
  border:1px solid black;
}

.middletable td:last-of-type{
    border:0px;
}

以下是HTML：

<table class="middletable">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
<table>

这里有一个JSFiddle来演示代码的实际应用：http://jsfiddle.net/5pt2axd1/

如何从HtmlTable的一列和触及它的包含表的一部分中删除边框？

3 个答案: