css - 是不是不可能让第一个表行只有边框并将最后一行的特色行和普通行分开？

Question

    tr.featured:first-child{
      border-top: 5px solid red;
    }


<table>
    <tbody>
        {{#each i:idx}}

            <tr on-click="detail" class="{{featured ? 'featured' : ''}}">
                <td>
                  name JJ
                </td>
                <td>
                  address Texas
                </td>
                <td>
                  phone 4545-4555-455

                </td>
            </tr>

            {{#if active}}
                <tr class="detail">
                    <td colspan="3">
                       More more more information about us
                    </td>
                </tr>
            {{/if}}
       {{/each}}
    </tbody>
</table>

例如，如果有特色文章，表格行将被动态添加。尝试在第一行显示边框顶部，但所有特色行都显示边框顶部。

试图将最后一个特色行和最后一个正常行按边距分开，但它不会用边距分开，这令人头疼。添加空行是作弊，但它也意味着为所有行添加空行，因为它是动态打印的。

是否无法使第一行仅显示边框并分隔最后一行:特色行和普通行？请帮忙

Answer 1

希望我明白你想要什么。看下面的例子

.featured:first-of-type {
 border-top: solid 1px #333;
}

或者

  .featured:nth-of-type(1) {
     border-top: solid 1px #333;
    }

上面的 border-top 只应用于第一行

要选择最后一行，执行此操作

.featured:last-of-type {
     /* do whatever you want for the last row here */
    }

注意 margin 属性不适用于 display:table-cell。折叠边框，然后使用边框间距来实现像空格一样的边距。