html - attribute - tooltip bootstrap 4 example

Mesa Bootstrap sin rayas/bordes

Question

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 debo mostrar en tablas. Así que quiero poner tablas sin márgenes dentro de una tabla normal mientras mantengo las líneas de separación para las mesas sin bordes.

Pero parece que incluso si digo específicamente que no se muestren los bordes en una mesa, 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 solo las fronteras interiores.

Answer 1

Éste trabajó para mí.

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

La clave es que necesitas agregar borde superior a la <td>

Answer 2

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

<table class=''table table-borderless''>

Answer 3

El estilo del borde se establece en los elementos td .

html:

<table class=''table borderless''>

css:

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

Answer 4

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 almohadillas están completamente despojados.

Answer 5

Expandí los estilos de tabla de 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 básicos 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 se delimitará la tabla específica con la clase, no cualquier tabla del árbol.

Answer 6

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

Pero eliminar .table-bordered aún deja las líneas de regla. Es un tema semántico, pero de acuerdo con la nomenclatura BS3 + he usado este conjunto de modificaciones:

.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>

Answer 7

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

Para un estilo básico-relleno ligero y solo divisores horizontales -agregar 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.

Answer 8

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)

Answer 9

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

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

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

en adelante, cualquier cosa con estilo

.table

no mostrará fronteras

Answer 10

Usa la clase de borde de Boostrap 4

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

o

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

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

Answer 11

Usando Bootstrap 3.2.0 tuve un problema con la solución Brett Henderson (las fronteras 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;
}

Answer 12

Use hidden lugar de none :

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

Answer 13

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

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