jquery - テーブルに複数の行がある場合、下の境界線が追加されます

Question

テーブルに複数の行がある場合、下の境界線を追加したい。表に 1 行しかない場合、下の境界線は非表示にする必要があります。これを達成する方法を教えてください。以下の画像例をご覧ください。

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最も簡単な方法は、以前の の兄弟であるを選択することtrです。

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

上記は、(写真の外観から)border-bottomが上にあることを前提としていますが、それ自体にtdある場合は次のようになります。tr

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

border-bottomがそれ自体にある場合はtable、質問へのタグとして jQuery を提供するため、JavaScript が必要になります (CSS には親セレクターがないため)。

$('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;
    }