Tabla Bootstrap sin rayas / bordes

Usando Bootstrap 3.2.0 tuve problemas con la solución de Brett Henderson (las fronteras siempre estaban ahí), así que la mejoré:

HTML

<table class="table table-borderless">

CSS

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

Similar al resto, pero más específico:

    table.borderless td,table.borderless th{
     border: none !important;
}

No agregue la clase .table a su etiqueta <table>. Desde los documentos de Bootstrap en tablas :

Para el estilo básico-relleno ligero y solo divisores horizontales-agregue la clase base .table a cualquier <table>. Puede parecer super redundante, pero dado el uso generalizado de tablas para otros complementos como calendarios y selectores de fecha, hemos optado por aislar nuestros estilos de tabla personalizados.

En mi CSS:

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

En mi directiva:

<table class='table borderless'>
    <tr class='borderless' ....>

No puse el 'borderless' para el elemento td.

Probado y funcionó! Todos los bordes y rellenos están completamente despojados.

Desde Bootstrap v4.1 puede agregar table-borderless a su tabla, consulte documentación oficial:

<table class='table table-borderless'>

Prueba esto:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Nota: Lo que estaba haciendo antes no funcionaba porque su código css estaba dirigido a una tabla dentro de su .tabla sin bordes (que probablemente no existía)

Expandí los estilos de tabla Bootstrap como lo hizo Davide Pastore, pero con ese método los estilos también se aplican a todas las tablas secundarias, y no se aplican al pie de página.

Una mejor solución sería imitar los estilos de tabla core Bootstrap, pero con su nueva clase:

.table-borderless>thead>tr>th
.table-borderless>thead>tr>td
.table-borderless>tbody>tr>th
.table-borderless>tbody>tr>td
.table-borderless>tfoot>tr>th
.table-borderless>tfoot>tr>td {
    border: none;
}

Entonces cuando se usa <table class='table table-borderless'> solo la tabla específica con la clase será bordeada, no cualquier tabla en el árbol.

Sé que este es un hilo viejo y que has elegido una respuesta, pero pensé en publicar esto, ya que es relevante para cualquier otra persona que esté buscando actualmente.

No hay razón para crear nuevas reglas CSS, simplemente deshaga las reglas actuales y los bordes desaparecerán.

    .table>tbody>tr>th,
    .table>tbody>tr>td {
        border-top: 0;
    }

En el futuro, cualquier cosa con estilo

    .table

No mostrará fronteras.

Llego tarde al juego aquí, pero FWIW: agregar .table-bordered a un .table solo envuelve la tabla con un borde, aunque agregando un borde completo a cada celda.

Pero la eliminación de .table-bordered todavía deja las líneas de la regla. Es una cuestión semántica, pero de acuerdo con la nomenclatura BS3+ he utilizado este conjunto de anulaciones:

.table.table-unruled>tbody>tr>td,
.table.table-unruled>tbody>tr>th {
  border-top: 0 none transparent;
  border-bottom: 0 none transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      .table
      <table class="table">
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered">
        .table .table-bordered
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <table class="table table-unruled">
        .table .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered table-unruled">
        .table .table-bordered .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>

Use hidden en lugar de none:

.hide-bottom {
    border-bottom-style: hidden;
}

Utilice la clase border- de Boostrap 4

<td class="border-0"></td>

O

<table class='table border-0'></table>

Asegúrese de terminar la entrada de clase con el último cambio que desee hacer.

La mayoría de los ejemplos parecen ser demasiado específicos y/o hinchados.

Aquí estaba mi solución recortada usando Bootstrap 4.0.0 (4.1 incluye .table-borderless pero sigue siendo alfa)...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

Similar a muchas soluciones propuestas, pero con un mínimo de bytes

Nota: Terminé aquí porque estaba viendo referencias BS4.1 y no podía averiguar por qué .table-borderless no estaba trabajando con mis fuentes 4.0 (por ejemplo: error de operador, duh)

Este funcionó para mí.

<td style="border-top: none;">;

La clave es que necesita agregar border-top a <td>