Estoy aprendiendo estilos CSS
para ello estoy trabajando con una tabla html y me preguntaba cómo puedo eliminar los bordes de la celda en blanco para la primera fila de mi encabezado, además de redondear los bordes de las celdas Monto estimado
y Total
.
Dejo el html y el css además de un hilo de reproducción:
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
.blank {
background-color: #FFFFFF;
}
table tr {
background-color: #f8f8f8;
border: 2px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
<table>
<thead>
<tr>
<th class="blank"></th> //quitar bordes aqui
<th colspan="2">Monto Estimado</th> //redondear bordes aqui
<th>Total</th> //redondear bordes aqui
</tr>
<tr>
<th scope="col">Cuenta</th>
<th scope="col">Egreso</th>
<th scope="col">Ingreso</th>
<th scope="col">Diferencia</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Cuenta">Visa - 3412</td>
<td data-label="Egreso">$3,190</td>
<td data-label="Ingreso">$1,000</td>
<td data-label="Diferencia">$2,190</td>
</tr>
<tr>
<td data-label="Cuenta">Visa - 3412</td>
<td data-label="Egreso">$5,000</td>
<td data-label="Ingreso">$1,000</td>
<td data-label="Diferencia">$4,000</td>
</tr>
<tr>
<td data-label="Cuenta">Visa - 3412</td>
<td data-label="Egreso">$7,000</td>
<td data-label="Ingreso">$4,000</td>
<td data-label="Diferencia">$3,000</td>
</tr>
</tbody>
</table>