Tabela de inicialização sem faixa / bordas

Estou meio preso com um problema de CSS ao usar o Bootstrap. Também estou usando o Angular JS com Angular UI.bootstrap (que pode fazer parte do problema).

Estou criando um site que exibe dados em uma tabela. Em algum momento, os dados contêm o objeto que eu tenho que exibir nas tabelas. Então, eu quero colocar tabelas sem borda dentro de uma tabela normal, mantendo linhas de separação dentro das tabelas sem borda.

Mas parece que, mesmo que eu diga especificamente para não mostrar as bordas de uma mesa, ele é forçado:

HTML:

<table class='table borderless'>

CSS:

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

Então aqui, o que eu quero é apenas as fronteiras internas.

O estilo da borda é definido nos tdelementos.

html:

<table class='table borderless'>

css:

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

Atualização: Desde o Bootstrap 4.1, você pode usar .table-borderlesspara remover a borda.

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

Usando o Bootstrap 3.2.0, tive um problema com a solução Brett Henderson (as bordas sempre estavam lá), então eu a melhorei:

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;
}

semelhante ao resto, mas mais específico:

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

Não adicione a .tableclasse à sua <table>tag. Nos documentos do Bootstrap nas tabelas :

Para um estilo básico - preenchimento leve e apenas divisores horizontais - adicione a classe base .tablea qualquer um <table>. Pode parecer super redundante, mas, devido ao amplo uso de tabelas para outros plugins, como calendários e seletores de datas, optamos por isolar nossos estilos de tabela personalizados.

Desde o Bootstrap v4.1, você pode adicionar table-borderlessà sua tabela, consulte a documentação oficial :

<table class='table table-borderless'>

No meu CSS:

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

Na minha diretiva:

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

Eu não coloquei o 'sem borda' para o elemento td.

Testado e funcionou! Todas as bordas e forros são completamente arrancados.

Expandi os estilos de tabela do Bootstrap como Davide Pastore, mas com esse método os estilos também são aplicados a todas as tabelas filho e não se aplicam ao rodapé.

Uma solução melhor seria imitar os principais estilos de tabela do Bootstrap, mas com sua nova classe:

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

Então, quando você usar <table class='table table-borderless'>apenas a tabela específica com a classe, será delimitada, e não qualquer tabela na árvore.

Tente o seguinte:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Nota: O que você estava fazendo antes não estava funcionando porque seu código css estava direcionado a uma tabela dentro da tabela .borderless (que provavelmente não existia)

Sei que este é um tópico antigo e que você escolheu uma resposta, mas pensei em publicá-lo, pois é relevante para qualquer pessoa que esteja procurando no momento.

Não há razão para criar novas regras CSS, basta desfazer as regras atuais e as bordas desaparecerão.

    .table> tbody> tr> th,
    .table> tbody> tr> td {
        borda superior: 0;
    }

daqui para frente, qualquer coisa com estilo

    .tabela

não mostrará fronteiras.

Use a border-classe do Boostrap 4

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

ou

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

Certifique-se de finalizar a entrada da classe com a última alteração que deseja fazer.

Este funcionou para mim.

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

A chave é que você precisa adicionar a borda superior ao <td>

Estou atrasado para o jogo aqui, mas FWIW: adicionar .table-bordereda .tableapenas envolve a tabela com uma borda, embora adicionando uma borda completa a cada célula.

Mas remover .table-borderedainda deixa as linhas de regra. É uma questão semântica, mas, de acordo com a nomenclatura BS3 +, usei esse conjunto de substituições:

.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 em hiddenvez de none:

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

A maioria dos exemplos parece ser muito específica e / ou inchada.

Aqui estava minha solução aparada usando o Bootstrap 4.0.0 (4.1 inclui .table-borderlessmas ainda alfa) ...

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

Semelhante a muitas soluções propostas, mas com bytes mínimos 😉

Nota: Acabei aqui porque estava visualizando as referências do BS4.1 e não conseguia descobrir por que .table-borderlessnão estava trabalhando com minhas fontes 4.0 (por exemplo: erro do operador, duh) 💩

Em alguns casos, também é necessário usar espaçamento entre bordas na classe da tabela, como:

espaçamento entre bordas: 0! importante;

Instale o bootstrap com o link npm ou 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>

obtenha a referência com este link