Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Gente, tenho as TRs da minha tabele já com os cantos arredondados (através das TDs first-child e last-child). Fiz dessa forma porque desconheço uma maneira de aplicar radius diretamente na TR.
O problema é que ao colorir a TR com o over do CSS, perde-se a formatação do border radius das TDs e exibe a TR com os cantos quadrados.
Preciso que os cantos fiquem arredondados mesmo ao passar o mouse sobre a TR.
Como resolvo isso?
tentou usar pseudo ::before e ::after ??
/ arredondar as células da primeira e última coluna /
tr td:first-child::before,
tr td:last-child::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background-color: white;
}/ primeira coluna /
tr td:first-child::before {
left: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}/ última coluna /
tr td:last-child::after {
right: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}/ quando o mouse passa sobre ela /
tr:hover {
background-color: #000;
}>
4 horas atrás, Marcos_imasters disse:
tentou usar pseudo ::before e ::after ??
/ arredondar as células da primeira e última coluna /
tr td:first-child::before,
tr td:last-child::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background-color: white;
}/ primeira coluna /
tr td:first-child::before {
left: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}/ última coluna /
tr td:last-child::after {
right: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}/ quando o mouse passa sobre ela /
tr:hover {
background-color: #000;
}
Infelizmente não funciona.
Veja abaixo o código completo, CSS + HTML.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
table {padding:0 10px 0 10px;
}/ arredondar as células da primeira e última coluna /
tr td:first-child::before,
tr td:last-child::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background-color: white;
}/ primeira coluna /
tr td:first-child::before {
left: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}/ última coluna /
tr td:last-child::after {
right: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}/ quando o mouse passa sobre ela /
tr:hover {
background-color: #000;
}
</style>
</head>
<body>
<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>>
Em 02/09/2023 at 00:08, tetsuo disse:
border-radius não se aplica a trs
tente aplicando nas tds
tr:hover td:first-child{
border-radius: 8px 0 0 8px;
}tr:hover td:last-child{
border-radius:0 8px 8px 0;
}
Infelizmente não funcionou.table {
margin: auto;
border-collapse: separate;
border-spacing: 0;
border: 2px solid #ccc;
border-radius: 10px;
overflow: hidden;
}tr {
background-color: #333;
position: relative;
border-radius: 10px;
transition: background-color 0.3s;
}td {
border: 1px solid #555;
padding: 10px 30px;
color: #FFF;
} background-color: red;
}
ainda nao entedir a forma que voce deseja coloquei como você ja fez seria isso?>
4 horas atrás, Marcos_imasters disse:
table {
margin: auto;
border-collapse: separate;
border-spacing: 0;
border: 2px solid #ccc;
border-radius: 10px;
overflow: hidden;
}tr {
background-color: #333;
position: relative;
border-radius: 10px;
transition: background-color 0.3s;
}td {
border: 1px solid #555;
padding: 10px 30px;
color: #FFF;
} background-color: red;
}
ainda nao entedir a forma que voce deseja coloquei como você ja fez seria isso?
Oi @Marcos_imasters. Obrigado pela atenção ao meu problema.
Eu preciso que as TDs (primeira e última, de cada LINHA) fiquem com os cantos arredondados.
Parece que a sua sugestão é para colunas.
Eu quero que pareça que cada TR tenha seus cantos arredondados. Como não é possível fazer isso diretamente na TR, preciso que a primeira e a última TD de cada LINHA tenha seus cantos arredondados.
Sendo a primeira TD (da cada linha) com o lado esquerdo arredondado, e a última TD (de cada linha) com o lado direito arredondado.https://codepen.io/washalbano/pen/bGOBwKr
/applications/core/interface/imageproxy/imageproxy.php?img=https://img001.prntscr.com/file/img001/wqqqhRq-Q_aTKDaCJagOEA.png&key=1efd9c188bd493375785847e6a43f2c205142b15916aea6f2c68f250fed4bc63" width="687" data-imageproxy-source="https://img001.prntscr.com/file/img001/wqqqhRq-Q_aTKDaCJagOEA.png" />
>
20 horas atrás, FabianoSouza disse:
Oi @Marcos_imasters. Obrigado pela atenção ao meu problema.
Eu preciso que as TDs (primeira e última, de cada LINHA) fiquem com os cantos arredondados.
Parece que a sua sugestão é para colunas.
Eu quero que pareça que cada TR tenha seus cantos arredondados. Como não é possível fazer isso diretamente na TR, preciso que a primeira e a última TD de cada LINHA tenha seus cantos arredondados.
Sendo a primeira TD (da cada linha) com o lado esquerdo arredondado, e a última TD (de cada linha) com o lado direito arredondado.
Seria que nem o washalbano disse?
table {
border-spacing: 1em;
border-collapse: separate;
} background-color: #333;
position: relative;
border-radius: 10px;
transition: background-color 0.3s;
} background-color: red;
} padding: 1rem 1.2rem;
border-radius: 6px;
border: 1px solid #555;
color: #FFF;
}>
Em 05/09/2023 at 12:52, washalbano disse:
https://codepen.io/washalbano/pen/bGOBwKr
Opa @washalbano!!!
Só preciso testar aqui se funciona mesmo passando o mouse sobre a TR e a colorindo, se mantém o arredondamento das TD (primeira e última de da respectiva linha).
>
10 horas atrás, Marcos_imasters disse:
Seria que nem o washalbano disse?
table {
border-spacing: 1em;
border-collapse: separate;
} background-color: #333;
position: relative;
border-radius: 10px;
transition: background-color 0.3s;
} background-color: red;
} padding: 1rem 1.2rem;
border-radius: 6px;
border: 1px solid #555;
color: #FFF;
}
Quase lá! Rsrs... O problema é o no hover do mouse...
Se eu aplicar uma cor de fundo da TR no hover do mouse, perde-se o efeito de arredondamento das TD (primeira e última), a linha (TR) fica no estado normal (cantos quadrados)../applications/core/interface/imageproxy/imageproxy.php?img=https://img001.prntscr.com/file/img001/wogJXlaZT16kGzwUXTOLzg.png&key=183c0f06f6fc503f89669e4e60b983d25b0d5c0d4e459913addbc024a310317e" width="669" data-imageproxy-source="https://img001.prntscr.com/file/img001/wogJXlaZT16kGzwUXTOLzg.png" />
consegue me mostrar screenshot de como ficou?
/applications/core/interface/imageproxy/imageproxy.php?img=https://img001.prntscr.com/file/img001/GEcQPlFNSz283-ZitMF4vQ.png&key=7de5e614a54c83a8ebdf929cb36b46744b7a069d08b9fb33bcb6f50bc5471330" width="746" data-imageproxy-source="https://img001.prntscr.com/file/img001/GEcQPlFNSz283-ZitMF4vQ.png" />
consegue me mostrar screenshot de como ficou?
aqui no meu funciona normal o hover nao será seu navegador qual esta usando?
>
Em 07/09/2023 at 00:10, washalbano disse:
consegue me mostrar screenshot de como ficou?
Show!! Agora funcionou perfeitamente @washalbano!!!
Muuuito obrigado, meu caro!!
Eu nunca vi essa estrutura de CSS que você criou. É isso que chamam de CSS aninhado? Me fala qual é o nome dessa técnica/macete para eu pesquisar mais.
Valew!!!
border-radius não se aplica a trs
tente aplicando nas tds
tr:hover td:first-child{
tr:hover td:last-child{