Jeg sitter litt fast med et CSS-problem mens jeg bruker Bootstrap. Jeg bruker også Angular JS med Angular UI.bootstrap (som kan være en del av problemet).
Jeg lager et nettsted som viser data i en tabell. Noen ganger inneholder dataene objekt som jeg må vise i tabeller. Så jeg ønsker å sette borderless tabeller inne i en vanlig tabell mens du holder inne separasjonslinjer for borderless tabeller.
Men det ser ut til at selv om jeg spesifikt sier at jeg ikke skal vise kantene på et bord, er det tvunget:
HTML:
<table class='table borderless'>
CSS:
.borderless table {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
Så her vil jeg bare ha de innvendige grensene.
Border styling er satt på td
-elementene.
html:
<table class='table borderless'>
css:
.borderless td, .borderless th {
border: none;
}
Oppdatering: Siden Bootstrap 4.1 kan du bruke .table-borderless
for å fjerne rammen.
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
Ikke legg til .table
-klassen i <table>
-taggen. Fra Bootstrap-dokumentasjonen på tables:
For grunnleggende styling - lett polstring og bare horisontale skillelinjer - legg til basisklassen
.table
til en hvilken som helst<table>
. Det kan virke overflødig, men gitt den utbredte bruken av tabeller for andre plugins som kalendere og datovelgere, har vi valgt å isolere våre egendefinerte tabellstiler.