tr：ホバーのボーダー半径を<tr>にするには？私は私がしたいことはある、それは<code><table></code>が含まれている大きな<code><div class="content"></code>を持って

Question

まず：

• テーブル（またはコンテンツ）すべての行にカーソルを渡すときの国境半径（10pxの）
• を必要とします（ありません<table>ちょうど<tr>：背景色の変更（それは大丈夫だ）が、コンテンツが国境半径を維持する必要がある（それは今のところ大丈夫ではありません - >これは私の質問です）

BORDER-を作る方法<div class=content">の半径が表示されています（trは "over"です単純なスクリプトがされ、それに乗っと境界半径は、ここ）ホバーに

を消失（イエロー色は灰色1ホバー=同一の幅と同じ境界半径）

.content{ 
 
    width:100%; 
 
    height:auto; 
 
    border-radius:10px; 
 
    background-color:gray; 
 
} 
 

 
table{ 
 
    width:100%; 
 
    cursor:pointer; 
 
} 
 

 
tr{ 
 
    width:100%; 
 
    border-radius:10px !important; 
 
} 
 

 
table tr:hover{ 
 
    background-color:gold; 
 
    border-radius:10px; 
 
}

<div class="content"> 
 
<table> 
 
<tr> 
 
    <td>hello</td> 
 
    <td>world</td> 
 
</tr> 
 
</table> 
 
</div>

と同じである必要があります

Answer 1

border-radiusは、td要素に適用する必要があります。

境界線の半径を適用するには、:first-childと:last-childセレクタを使用します。

.content { 
 
    width: 100%; 
 
    height: auto; 
 
    border-radius: 10px; 
 
    background-color: gray; 
 
} 
 
table { 
 
    width: 100%; 
 
    cursor: pointer; 
 
} 
 
tr { 
 
    width: 100%; 
 
    border-radius: 10px !important; 
 
} 
 
table tr:hover { 
 
    background-color: gold; 
 
    border-radius: 10px; 
 
} 
 
table tr:hover td:first-child { 
 
    border-top-left-radius: 10px; 
 
    border-bottom-left-radius: 10px; 
 
} 
 
table tr:hover td:last-child { 
 
    border-top-right-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
}

<div class="content"> 
 
    <table> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>world</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

HTML：

<div class="content"> 
<table> 
<tr> 
    <td>hello</td> 
    <td>world</td> 
</tr> 

</table> 
</div> 

CSS：

.content{ 
    width:100%; 
    height:auto; 
    border-radius:10px; 
    background-color:gray; 
} 

table{ 
    width:100%; 
    cursor:pointer; 
} 

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

table tr:hover{ 
    background-color:gold; 
    border-radius:10px; 
} 

Answer 3

あなたが上でもborder-radiusが必要それは

を助けている場合、その色は、私が最後td

に最初tdとborder-top-right-radiusとborder-bottom-right-radiusにborder-top-left-radiusとborder-bottom-left-radiusを入れている

TRの半径上で起こっている理由ですtdは私に知らせてあなたはを適用する必要が

.content{ 
 
    width:100%; 
 
    height:auto; 
 
    border-radius:10px; 
 
    background-color:gray; 
 
} 
 

 
table{ 
 
    width:100%; 
 
    cursor:pointer; 
 
} 
 

 
tr{ 
 
    width:100%; 
 
    border-radius:10px !important; 
 
} 
 
td:last-child { 
 
    -webkit-border-top-right-radius: 10px; 
 
    -webkit-border-bottom-right-radius: 10px; 
 
    -moz-border-radius-topright: 10px; 
 
    -moz-border-radius-bottomright: 10px; 
 
    border-top-right-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
} 
 
td:first-child{ 
 
    -webkit-border-top-left-radius: 10px; 
 
    -webkit-border-bottom-left-radius: 10px; 
 
    -moz-border-radius-topleft: 10px; 
 
    -moz-border-radius-bottomleft: 10px; 
 
    border-top-left-radius: 10px; 
 
    border-bottom-left-radius: 10px; 
 
} 
 

 
table tr:hover{ 
 
    background-color:gold; 
 
    border-radius:10px; 
 
}

<div class="content"> 
 
<table> 
 
<tr> 
 
    <td>hello</td> 
 
    <td>world</td> 
 
</tr> 
 
</table> 
 
</div>

Answer 4

trタグではなく、tdタグにを追加してください。

• 最初の行の最初のセルの左上、
• トップ：複数のセルを含む各、あなたがあなたのテーブルに複数の行を持っていると仮定すると、あなたはborder-radius 4に異なるセルを適用する設定する必要があります
• 最後の行の最初のセルの左下と、
• 最後の行の最後のセルの右下に表示されます。

は、ここではそうだろう方法は次のとおりです。

table{ 
 
    background:gray; 
 
    border-radius:10px; 
 
    width:100%; 
 
} 
 
tr:hover>td{ 
 
    background:gold; 
 
} 
 
tr:first-child>td:first-child{ 
 
    border-top-left-radius:10px; 
 
} 
 
tr:first-child>td:last-child{ 
 
    border-top-right-radius:10px; 
 
} 
 
tr:last-child>td:first-child{ 
 
    border-bottom-left-radius:10px; 
 
} 
 
tr:last-child>td:last-child{ 
 
    border-bottom-right-radius:10px; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Lorem</td> 
 
     <td>Ipsum</td> 
 
     <td>Dolor</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem</td> 
 
     <td>Ipsum</td> 
 
     <td>Dolor</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lorem</td> 
 
     <td>Ipsum</td> 
 
     <td>Dolor</td> 
 
    </tr> 
 
    </tbody> 
 
</table>