Slik fjerner du rammer helt fra HTML-tabellen

Målet mitt er å lage en HTML-side som ligner på en "fotoramme". Med andre ord vil jeg lage en tom side som er omgitt av 4 bilder.

Dette er koden min:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

Og CSS-klassene er følgende:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

Problemet mitt er at jeg får tynne hvite linjer mellom cellene i tabellen, jeg mener at grensen til bilder ikke er kontinuerlig. Hvordan kan jeg unngå disse hvite mellomrommene?

Brian Tompsett - 汤莱恩
Redigerte spørsmål 7. november 2017 в 10:07
Programmering
html css html-table background-image
16. april 2011 в 2:39
3 visninger
Løsning
<table cellspacing="0" cellpadding="0">

Og i css:

table {border: none;}

EDIT: Som iGEL bemerket, er denne løsningen offisielt utdatert (fungerer imidlertid fortsatt), så hvis du starter fra bunnen av, bør du gå med jnpcl&# 39s border-collapse-løsning.

Jeg liker faktisk ikke denne endringen så langt (jobber ikke med tabeller så ofte). Det gjør noen oppgaver litt mer kompliserte. F.eks. når du vil inkludere to forskjellige grenser på samme sted (visuelt), mens den ene er TOPP for en rad, og den andre er BUNN for den andre raden. De vil kollapse (= bare én av dem vil bli vist). Deretter må du studere hvordan grensens "prioritet" beregnes og hvilke grensestiler som er "sterkere" (dobbel vs. solid osv.).

Jeg likte dette:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Nå, med grensekollaps, vil dette ikke fungere ettersom det alltid er en grense fjernet. Jeg må gjøre det på en annen måte (det finnes flere løsninger ofc). En mulighet er å bruke CSS3 med box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​


.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​

Du kan også bruke noe som "groove|ridge|inset|outset" border style med bare en enkelt kant. Men for meg er dette ikke optimalt, fordi jeg ikke kan kontrollere begge fargene.

Kanskje det er noen enkel og fin løsning for å kollapse grenser, men jeg har ikke sett det ennå, og jeg har ærlig talt ikke brukt mye tid på det. Kanskje noen her vil være i stand til å vise meg / oss;)

Damb
Redigert svar 25. november 2012 в 9:31
Kommentarer (2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
Redigert svar 6. oktober 2018 в 3:46
Kommentarer (0)

For meg trengte jeg å gjøre noe slikt for å fjerne kantene helt fra tabellen og alle cellene. Dette krever ikke endring av HTML i det hele tatt, noe som var nyttig i mitt tilfelle.

table, tr, td {
    border: none;
}
Kommentarer (1)