Eliminar líneas de fila en Twitter Bootstrap
-
28-10-2019 - |
Pregunta
Estoy usando Twitter Bootstrap para alguna aplicación web que estoy obligado a hacer (no soy un desarrollador web) y no puedo encontrar una manera de deshabilitar las líneas de filas para tablas.
Como puedes ver en el Documentación de bootstrap, El estilo de tabla predeterminado contiene filas de línea.
Saludos,
Solución
Agregue esto a su CSS principal:
table td {
border-top: none !important;
}
Use esto para versiones más nuevas de Bootstrap:
.table th, .table td {
border-top: none !important;
}
Otros consejos
En Bootstrap 3, he agregado una clase de tabla de no freno
.table-no-border>thead>tr>th,
.table-no-border>tbody>tr>th,
.table-no-border>tfoot>tr>th,
.table-no-border>thead>tr>td,
.table-no-border>tbody>tr>td,
.table-no-border>tfoot>tr>td {
border-top: none;
}
bootstrap.min.css es más específico que su propia hoja de estilo si solo usa .table TD. Así que usa esto en su lugar:
.table>tbody>tr>th, .table>tbody>tr>td {
border-top: none;
}
Esto es lo que funcionó para mí ..
.table-no-border>thead>tr>th,
.table-no-border>tbody>tr>th,
.table-no-border>tfoot>tr>th,
.table-no-border>thead>tr>td,
.table-no-border>tbody>tr>td,
.table-no-border>tfoot>tr>td,
.table-no-border>tbody,
.table-no-border>thead,
.table-no-border>tfoot{
border-top: none !important;
border-bottom: none !important;
}
Tuve que sacar el! Importante para que se quede.
Recibí la misma pregunta de un amigo. Mi sugerencia que no requiere !Important
Parece esto: agrego una clase personalizada "no-border
"que se puede agregar a la tabla de bootstrap.
.table.no-border tr td, .table.no-border tr th {
border-width: 0;
}
Puedes ver mi ir a un solución aquí
Al revés, si tiene problemas para agregar las líneas a su panel, no se olvide de agregar a su tabla. Por defecto (http://getbootstrap.com/components/#panels), se supone que debe agregar la línea, pero me ayudó a agregar la etiqueta para que ahora se muestren las líneas de fila.
El siguiente ejemplo "probablemente" no mostrará las líneas entre filas:
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<tr><td> Hi 1! </td></tr>
<tr><td> Hi 2! </td></tr>
</table>
</div>
El siguiente ejemplo mostrará las líneas entre filas:
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<thead></thead>
<tr><td> Hi 1! </td></tr>
<tr><td> Hi 2! </td></tr>
</table>
</div>