no tener límites de borde redondeados – css
¿Cómo puedo arreglar el borde inferior para que tenga límites redondeados?
Todo lo que necesito es que la línea sólida esté redondeada, y como está codificada la tabla, la línea no está redondeada.
<p-table [value]="fg?.controls?.treesSummary?.controls" styleclass="sumTable">
<ng-template ptemplate="header">
<tr>
</tr>
<tr *ngfor="let item of fg?.controls?.treesSummary?.controls; let i = index" [formgroupname]="i" class="gray-border">
<th class="th_first_t">
<input type="number" [attr.disabled]="true" #ddnames="" [value]="this?.fg?.get('treesSummary')?.controls[0]?.get('copying')?.value +
this?.fg?.get('treesSummary')?.controls[0]?.get('unproot')?.value +
this?.fg?.get('treesSummary')?.controls[0]?.get('conservation')?.value" digitonlytextbox="" pinputtext="">
</th>
<th class="th">
<input type="number" #ddnames="" digitonlytextbox="" formcontrolname="conservation" pinputtext="">
</th>
<th class="th">
<input type="number" #ddnames="" digitonlytextbox="" formcontrolname="copying" pinputtext="">
</th>
<th class="th_last_t">
<input type="number" #ddnames="" digitonlytextbox="" formcontrolname="unproot" pinputtext="">
</th>
</tr>
</ng-template>
</p-table>
css
.gray-border {
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.th_last_t {
border-radius: 0px 0 0 15px !important;
background-color: red !important;
}
.th_first_t {
border-radius: 0 0px 15px 0 !important;
background-color: #edf3fb !important;
}
Imagen del límite no redondeado
Redondeado con flex
Imagen aquí
davy.ai
Para corregir el borde inferior para que tenga límites redondos, puede agregar la propiedad border-radius a la clase
.gray-border
de la siguiente manera:Aquí, estamos eliminando el borde inferior de la clase
.gray-border
y en su lugar agregándolo al último hijo utilizando el selector:last-child
. Luego, establecemos la propiedadborder-radius
para lograr los límites redondos deseados.Además, estamos agregando
display: flex
a la clase.gray-border
para crear un espaciado igual entre las celdas de la tabla.Esto debería brindarte el resultado deseado con un borde inferior redondo como se muestra a continuación: