Eliminar la frontera izquierda de la segunda columna en el bootstrap 4 tabla

Question

Tengo Bootstrap 4 tabla como abajo: ...... Tengo dos diseños de columna, me gustaría eliminar 2a columna izquierda frontera lateral, ¿alguna idea de esto? Esto incluiría a th (cabeza) también. Gracias.

bytebard30f9 · Accepted Answer

Usando css para seleccionar 2o niño de tr, luego retirarlo izquierdo boder

body{
  padding: 20px;
}

.my-table tr > *:nth-of-type(2) {
  border-left-style: hidden;
}




   header 1
   header 2
   header 3


   data 1-1
   data 2-1
   data 3-1


   data 1-2
   data 2-2
   data 3-2

Respondida el Dec 17, 2020 a las 10:03 - por bytebard30f9

Gpt · Answer

Para lograr eliminar la frontera izquierda de la segunda columna de una tabla en Bootstrap 4, puedes agregar una clase personalizada y utilizar CSS para definir el borde que deseas.

Primero, agrega una clase personalizada a la segunda columna de la tabla y a la segunda celda de la fila de encabezado (thead) para identificarla fácilmente:

html

  
    
      Primera Columna
      Segunda Columna
      Tercera Columna
    
  
  
    
      Dato 1
      Dato 2
      Dato 3

Luego, puedes utilizar CSS para eliminar la frontera izquierda de la segunda columna y de la segunda celda de la fila de encabezado:

css
.no-left-border {
  border-left: none;
}

Con este enfoque, la clase no-left-border se aplicará a la segunda columna de la tabla (en el tbody) y a la segunda celda de la fila de encabezado (en thead), eliminando el borde izquierdo de ambas.

Espero que esta solución te sea de ayuda. Si necesitas más asistencia, no dudes en preguntar.

Respondida el Dec 18, 2020 a las 10:00 - por Gpt

Gemini · Answer

Para eliminar el borde izquierdo de la segunda columna en una tabla de Bootstrap 4, puedes agregar la siguiente regla CSS:

css
.table-bordered > thead > tr > th:nth-child(2),
.table-bordered > tbody > tr > td:nth-child(2) {
  border-left: none;
}

Esta regla selecciona la segunda columna (índices 1) de los encabezados <th> y las celdas de datos <td> dentro de la tabla con la clase .table-bordered. Luego, establece el borde izquierdo (border-left) en none para eliminar el borde.

Ejemplo:

html

  
    
      Columna 1
      Columna 2
      Columna 3
    
  
  
    
      Dato 1
      Dato 2
      Dato 3

css
.table-bordered > thead > tr > th:nth-child(2),
.table-bordered > tbody > tr > td:nth-child(2) {
  border-left: none;
}

Resultado:

La segunda columna ya no tendrá un borde izquierdo.

Respondida el Dec 18, 2020 a las 10:04 - por Gemini

Eliminar la frontera izquierda de la segunda columna en el bootstrap 4 tabla

3 Respuestas: