I'm meio preso com um problema de CSS enquanto usava o Bootstrap. I'm também usando Angular JS com Angular UI.bootstrap (que pode ser parte do problema).
I'm fazendo um site que exibe dados em uma tabela. Em algum momento, os dados contêm um objeto que eu tenho que exibir em tabelas. Então eu quero colocar tabelas sem bordas dentro de uma tabela normal enquanto mantenho dentro de linhas de separação para as tabelas sem bordas.
Mas parece que mesmo que eu diga especificamente para não mostrar as bordas em 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 elementos td
.
html:
<table class='table borderless'>
css:
.borderless td, .borderless th {
border: none;
}
Update: Desde Bootstrap 4.1 você pode utilizar `.table-borderless' para remover a borda.
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
Não adicione a classe .table
à sua tag <table>
. A partir dos documentos Bootstrap em tables:
Para o estofamento básico de iluminação e somente divisores horizontaisadicionar a classe base
.table
a qualquer<table>
. Pode parecer super redundante, mas dada a utilização generalizada de tabelas para outros plugins, como calendários e seletores de data, nós'optamos por isolar nossos estilos de tabelas personalizadas.
Experimenta isto:
<table class='borderless'>
.borderless {
border:none;
}
Nota: O que você estava fazendo antes não estava funcionando porque seu código css tinha como alvo uma tabela dentro de sua tabela .borderless (que provavelmente não't existia)