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,

¿Fue útil?

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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top