Avatar billede fatal85 Nybegynder
09. juli 2010 - 16:41 Der er 2 kommentarer og
1 løsning

css tabel design

Jeg vil gerne have en tabel med en 1px border rundt om hele tabellen, og første række til at være sorte og resten til at være hvide. Til det har jeg lavet følgende:

table { border-width: 1px; }
tr.first { background: black;}
tr.second { background: white; }
p{ color: white; }
a{ color: grey; }

Problemet er, at der mellem hver th/td celle i den sorte række, komme en hvid opdeling. Hvordan kan man gøre det så hele rækken inkl. denne lille border også bliver sort?

Jeg har prøvet med collapse, så koden så sådan her ud:

table { border-width: 1px; border-collapse: collapse;}
tr.first { background: black;}
tr.second { background: white; }
p{ color: white; }
a{ color: grey; }

Men så forsvinder borderen rundt om hele tabellen.
Avatar billede aners Nybegynder
09. juli 2010 - 17:14 #1
Jeg er ikke sikker på hvad du mener, det ville være nemmere hvis du tegnede det op med farver.

Er det sådan her du mener?:

<style type="text/css">
.black {
    border: 1px solid #000000;
}

.blackBottom {
    border-bottom: 1px solid #000000;
}
</style>
<table cellpadding="0" cellspacing="0" class="black">
<tr>
  <td class="blackBottom">
  bla
  </td>
  <td class="blackBottom">
  bla
  </td>
</tr>
<tr>
  <td>
  ble
  </td>
  <td>
  ble
  </td>
</tr>
<tr>
  <td>
  blo
  </td>
  <td>
  blo
  </td>
</tr>
<tr>
  <td>
  bli
  </td>
  <td>
  bli
  </td>
</tr>
</table>
Avatar billede claes57 Ekspert
09. juli 2010 - 17:18 #2
i tabellen skal du have
cellpadding="0" cellspacing="0"

jeg har det ikke på css-form pt.
Avatar billede fatal85 Nybegynder
09. juli 2010 - 17:35 #3
#1
er det ikke basalt set det samme som jeg gør?

Fandt hvertfald ud af det. Brugte følgende kode.

table { border-width: 1px; border-style: solid; border-color: black; border-collapse: collapse;}
th { background: black;}
tr.first { background: grey; }
tr.second { background: white; }
p{ color: white; }
a{ color: grey; }

Men der er så også forskel på th og to forskellige tr
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester