2016-04-26 6 views
3

これを使用して、テーブルの一番上の行(ヘッダー)をスタイルしますが、最後の行はどのようにして行いますか?テーブルの最後の行にボーダー半径を適用する(ng-repeatを使用)

更新:私はテーブルにAngularJS ng-repeatを使用しています。中間の行は最後の行のみを対象としたスタイリングを使用しています。

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

答えて

0

このようなものはありますか?

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

このようなものは何ですか?

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

あなたは近くにいます。ここで問題となるのは、すべての「中間」行にはまだスタイルが適用されているということです。 –

+1

@Michael_Bの答えはあなたのためにそれを実行し、それが動作するように見える – jpopesculian

1

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>

+0

非常にニース。あなたのようなコードでは、私のページはまだそれぞれの中間行をスタイルします。私の問題はAngularJSとCSSセレクタの間にあると思いますか? –

+0

ブラウザのインス​​ペクタを開き、中の行に適用されているスタイルを確認します。それらのスタイルのソースも見ることができます。 –

+0

ああ、そうです。中間要素にはtr:last-child td:first-child stylingがあります。 –

0

のは、あなたがfooidtableを持っているとしましょう。

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

は、あなたがテーブルの最後に全く見えないtr秒を持っていないことを確認してください。

関連する問題