將邊框半徑應用到表格的最後一行（使用ng-repeat）

我使用這種方式來設置表格的最上面一行（標題），但我如何對最後一行做同樣的操作？將邊框半徑應用到表格的最後一行（使用ng-repeat）

更新：我在桌子上使用AngularJS ng-repeat，中間的行只使用最後一行的樣式。

th:first-child { 
    border-top-left-radius: 15px; 
} 
th:last-child { 
    border-top-right-radius: 15px; 
}

來源

2016-04-26 Michael Meritt

是這樣的嗎？

tr:last-child { 
    border-bottom-right-radius: 15px; 
}

來源

2016-04-26 00:24:23

是這樣的東西你想要什麼？

tr:last-child td:first-child { 
    border-bottom-left-radius: 15px; 
} 
tr:last-child td:last-child { 
    border-bottom-right-radius: 15px; 
}

來源

2016-04-26 00:25:21 jpopesculian

你就近了。這裏的問題是所有'中間'行仍然會收到樣式。 –

@Michael_B的答案爲你運行，它看起來像它的工作 – jpopesculian

th,td { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
th:first-child { 
 
    border-top-left-radius: 15px; 
 
} 
 
th:last-child { 
 
    border-top-right-radius: 15px; 
 
} 
 
tr:last-child td:first-child { 
 
    border-bottom-left-radius: 15px; 
 
} 
 
tr:last-child td:last-child { 
 
    border-bottom-right-radius: 15px; 
 
}

<table> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

來源

2016-04-26 00:30:38

非常好。有了像你這樣的代碼，我的頁面仍然保留每個中間行的樣式。你認爲我的問題是AngularJS和CSS選擇器之間的問題嗎？ –

打開瀏覽器檢查器，看看哪些樣式正在應用到您的中間行。你也可以看到這些風格的來源。 –

啊是的。中間元素有tr：最後孩子td：第一個孩子造型。 –

讓我們假設你有與foo的id一個table。

#foo tr:last td:first-child { 
    border-top-left-radius: 15px; 
} 
#foo tr:last td:last-child { 
    border-top-right-radius: 15px; 
}

請確保您在表格末尾沒有隱形tr s。

來源

2016-04-26 00:50:40

將邊框半徑應用到表格的最後一行（使用ng-repeat）

回答

相關問題