jquery - 如果表格有多行，则添加底部边框线

Question

如果表格有多行，我想添加底部边框线。如果表格只有单行，则应隐藏底部边框。请指导我如何做到这一点。请参阅下面的示例图像。

Answer 1

您可以使用last-of-type或last-child如@David 所说，例如这里

table tr td {
    border-bottom: 1px solid #f00;
}

table tr:last-of-type td {
    border-bottom: 0;
}

演示

Answer 2

最简单的方法是选择tr:last-child是 previous 的兄弟tr：

tr + tr:last-child td {
    border-bottom-width: 0;
}

上面假设（从您的图片的外观）如果它在自身border-bottom上，则在 上，但是：tdtr

tr + tr:last-child {
    border-bottom-width: 0;
}

如果border-bottom是table本身，那么 JavaScript 将是必要的（因为 CSS 没有父选择器），因为您提供 jQuery 作为您的问题的标签：

$('table').filter(function(){
    return $(this).find('tr').length < 2;
}).addClass('singleOrNoRows');

使用 CSS：

.singleOrNoRows {
    border-bottom-width: 0;
}

Answer 3

这是小提琴链接

HTML

<div class="wrapper">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="left" valign="top">sadfs</td>
    </tr>
    <tr>
        <td align="left" valign="top">sdaf</td>
    </tr>
    <tr>
        <td align="left" valign="top">sdaf</td>
    </tr>
    <tr>
        <td align="left" valign="top">sadf</td>
    </tr>
</table>
</div>

CSS

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/17px Arial, Helvetica, sans-serif;
    color:#666666;
    }
ul, li {
    list-style:none;
    }
.wrapper {
    width:960px;
    margin:0 auto;
    }
table,thead,tbody,th,td,tr { 
    display: block;
    background-color:#f9f5f5;
}
table thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

table td { 
    border: none;
    border-bottom: 1px solid #e0e0e0; 
    margin:0 10px;
    padding:5px 10px;
}
table tr:last-of-type td {
    border-bottom:0;
    }