Pri používaní Bootstrapu som sa tak trochu zasekol s problémom CSS. Používam aj Angular JS s Angular UI.bootstrap (čo môže byť súčasťou problému).
Robím webovú stránku, ktorá zobrazuje údaje v tabuľke. Niekedy údaje obsahujú objekt, ktorý musím zobraziť v tabuľkách. Chcem teda umiestniť bezokrajové tabuľky do normálnej tabuľky, pričom chcem zachovať vnútorné oddeľovacie čiary pre bezokrajové tabuľky.
Zdá sa však, že aj keď výslovne poviem, aby sa v tabuľke nezobrazovali okraje, vynúti sa to:
HTML:
<table class='table borderless'>
CSS:
.borderless table {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
Takže tu chcem len vnútorné okraje.
Štýl ohraničenia je nastavený na prvkoch td
.
html:
<table class='table borderless'>
css:
.borderless td, .borderless th {
border: none;
}
Aktualizácia: Od verzie Bootstrap 4.1 môžete použiť .table-borderless
na odstránenie okraja.
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
Nepridávajte triedu .table
do značky <table>
. Z dokumentácie Bootstrap o tabuľkách:
Pre základný štýl - ľahké vypĺňanie a len vodorovné deliace prvky - pridajte základnú triedu .table
k akémukoľvek tagu <table>
. Môže sa to zdať veľmi zbytočné, ale vzhľadom na rozšírené používanie tabuliek pre iné doplnky, ako sú kalendáre a výbery dátumov, sme sa rozhodli izolovať naše vlastné štýly tabuliek.
Skúste toto:
<table class='borderless'>
.borderless {
border:none;
}
Poznámka: To, čo ste robili predtým, nefungovalo, pretože váš css kód bol zameraný na tabuľku v rámci vašej .borderless tabuľky (ktorá pravdepodobne neexistovala)