3

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>

2 respuestas 2

2

Poner bordes redondeados a una celda puede resultar un poco lioso, aquí pongo un ejemplo de cómo lo haría:

Para empezar, eliminaría el borde de la tabla y únicamente utilizaría bordes en las filas. De esta manera, la primera de ellas, que debería ir en blanco, no tendría por encima ningún borde.

El segundo paso sería añadir un span dentro de las dos cabeceras que quieres redondear ('Monto estimado' y 'Total'), añadiéndoles una clase ('.tab'). Lo que haremos en esta fila es eliminar el padding y el color de fondo para definir estas propiedades dentro del span.

La principal complicación con los dos span es que, al declarar el 100% del ancho de la celda, desborda a ésta. Para resolverlo, utilizo la propiedad box-sizing (más información).

El otro punto más llamativo es el declarar la posición de la celda y el span. Esto, junto a left: 1px desplaza un píxel los span a la derecha. Lo hago para que el borde de la derecha del span se alinee con el border de la fila inferior, ya que de otro modo habría una pequeña diferencia entre ambos.

Para cambiar el borde (únicamente he añadido bordes en las esquinas superiores), puedes consultar documentación sobre la propiedad border-radius aquí.

En este ejemplo, no sería necesaria la clase '.blank'.

table {
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table tr {
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  border-left: 2px solid #ddd;
}

table thead th,
table tbody td {
  padding: .625em;
  text-align: center;
  background-color: #f8f8f8;
}

table thead th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

table thead tr:first-child {
  border-left: none;
  border-right: none;
}

table thead tr:first-child th {
  position: relative;
  padding: 0;
  background-color: transparent;
}

.tab {
  position: relative;
  left: 1px;
  display: block;
  padding: .625em;
  width: 100%;
  height: 100%;
  border-top: 2px solid #ddd;
  border-right: 2px solid #ddd;
  border-left: 2px solid #ddd;
  border-radius: 1em 1em 0 0;
  background-color: #f8f8f8;
}

.tab,
.tab:before,
.tab:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<table>
  <thead>
    <tr>
      <th></th>
      <th colspan="2"><span class="tab">Monto Estimado</span></th>
      <th><span class="tab">Total</span></th>
    </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>

0

Puedes modificar los estilos de sólo un <tr> con una pseudo-clase que es nth-child(posición del elemento). Esto toma el elemento hijo (<tr>) que está de arriba para abajo; al obtener los estilos sólo de ese elemento, ya puedes modificarlo.

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

.blank {
  background-color: #FFFFFF;
}

table thead tr {
  background-color: #f8f8f8;
  border: 2px solid #ddd;
  padding: .35em;
}

table thead tr:nth-child(1) {
  border: transparent;
}

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>

El borde externo ya forma parte de toda la tabla. Espero haberte ayudado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.