Eliminar la frontera izquierda de la segunda columna en el bootstrap 4 tabla
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.
Pregunta hecha hace 3 años, 5 meses, 6 días - Por quantumcoderd26d
3 Respuestas:
-
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
Votos positivos: 0 | Votos negativos: 0 -
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
Votos positivos: 0 | Votos negativos: 0 -
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
) ennone
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
Votos positivos: 0 | Votos negativos: 0