Estoy un poco atascado con un problema de CSS mientras se utiliza Bootstrap. También estoy usando Angular JS con Angular UI.bootstrap (que podría ser parte del problema).
I'm haciendo un sitio web que muestra los datos en una tabla. A veces, los datos contienen objetos que tengo que mostrar en tablas. Así que quiero poner tablas sin bordes dentro de una tabla normal, manteniendo las líneas de separación para las tablas sin bordes.
Pero parece que aunque diga específicamente que no se muestren los bordes en una tabla, se fuerza:
HTML:
<table class='table borderless'>
CSS:
.borderless table {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
Así que aquí, lo que quiero es sólo los bordes interiores.
El estilo del borde se establece en los elementos td
.
html:
<table class='table borderless'>
css:
.borderless td, .borderless th {
border: none;
}
Actualización: Desde Bootstrap 4.1 puedes utilizar .table-borderless
para eliminar el borde.
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
No añadas la clase .table
a tu etiqueta <table>
. De los documentos de Bootstrap sobre tables:
Para el estilo básico -acolchado ligero y sólo separadores horizontales- añada la clase base .table
a cualquier etiqueta <table>
. Puede parecer super redundante, pero dado el uso generalizado de tablas para otros plugins como calendarios y selectores de fechas, hemos optado por aislar nuestros estilos de tabla personalizados.