Mesa Bootstrap sin rayas / bordes

Estoy un poco atrapado con un problema de CSS mientras uso Bootstrap. También estoy usando Angular JS con Angular UI.bootstrap (que podría ser parte del problema).

Estoy haciendo un sitio web que muestra datos en una tabla. En algún momento, los datos contienen objetos que tengo que mostrar en las tablas. Por lo tanto, quiero poner tablas sin bordes dentro de una tabla normal mientras mantengo dentro de las líneas de separación para las tablas sin bordes.

Pero parece que incluso si digo específicamente que no muestre los bordes en una mesa, se ve obligado:

HTML:

<table class='table borderless'>

CSS:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

Entonces, aquí, lo que quiero es solo las fronteras interiores.

El estilo del borde se establece en los tdelementos.

html:

<table class='table borderless'>

css:

.borderless td, .borderless th {
    border: none;
}

Actualización: desde Bootstrap 4.1 puede usar .table-borderlesspara eliminar el borde.

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

Usando Bootstrap 3.2.0 tuve un problema con la solución de Brett Henderson (los bordes siempre estaban allí), así que lo 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 .tableclase a su <table>etiqueta. De los documentos de Bootstrap en las tablas :

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

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

<table class='table table-borderless'>

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 'sin bordes' para el elemento td.

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

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 principales de la tabla 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;
}

Luego, cuando use <table class='table table-borderless'>solo la tabla específica con la clase, no se incluirá ninguna tabla en el árbol.

Prueba esto:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Nota: Lo que estaba haciendo antes no funcionaba porque su código CSS apuntaba a una tabla dentro de su tabla .borderless (que probablemente no existía)

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 {
        borde superior: 0;
    }

en el futuro, cualquier cosa diseñada con

    .mesa

no mostrará fronteras

Usa la border-clase de Boostrap 4

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

o

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

Asegúrese de finalizar la entrada de clase con el último cambio que desea hacer.

Este me funcionó.

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

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

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

Pero la eliminación .table-borderedtodavía deja las líneas de la regla. Es un problema semántico, pero de acuerdo con la nomenclatura BS3 + he usado 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>

Usar en hiddenlugar de none:

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

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-borderlesspero aún alfa) ...

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

Similar a muchas soluciones propuestas, pero bytes mínimos 😉

Nota: Terminé aquí porque estaba viendo referencias BS4.1 y no podía entender por qué .table-borderlessno funcionaba con mis fuentes 4.0 (por ejemplo: error del operador, duh) 💩

En algunos casos, también se debe usar el espaciado de bordes en la clase de tabla, como:

espacio entre bordes: 0! importante;

Instale bootstrap con enlace npm o cdn

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

obtener la referencia con este enlace