cellspacing

6 svar · 274 visningar · startad av ejick 19 mars 2004

ejickMedlem sedan mars 2001895 inlägg

Frågan19 mars 2004 12:33#1

Hej,

jag undrar hur man kan göra om man vill ha en tabell eller ett liknande utseende där man har en tabell och använder cellspacing.

Klassisk htmlkod:
<table width="650" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td width="130" bgcolor="#FFFFFF"></td> 
    <td width="130" bgcolor="#FFFFFF"></td> 
    <td width="130" bgcolor="#FFFFFF"></td> 
    <td width="130" bgcolor="#FFFFFF"></td> 
    <td width="130" bgcolor="#FFFFFF"></td> 
  </tr>
  <tr>
    <td width="650" bgcolor="#FFFFFF" colspan="5"></td>
  </tr>
</table>

Följande kod gör att den stora kolumnen, den som sträcker sig över hela tabellen förskjuts något. Jag vill alltså att alla kolumner hamnar kloss i kloss så att säga.

Möjligheten finns ju att ta bort cellspacing="1" och ändra det till 0 för att sedan lägga in kolumner med 1px tjocklek och annan bakgrundsfärg, men det känns ganska så onödigt.

Ingen som vet hur man gör, gärna med css?

Mika3lMedlem sedan nov. 20018 492 inlägg

19 mars 2004 14:25#2

style="border: [i]x[/i]px solid #[i]xxxxxx[/i];"

Kanske hjälper dig?
Du kan lägga till så att det även blir t.ex border-left så att kanten vara är på vänstersidan.

jarvkloMedlem sedan juli 20013 378 inlägg

19 mars 2004 14:28#3

???
I vilka webbläsare får du problemet?
Jag provade din kod i MSIE6 och FireBird/Win (med bgcolor="silver" på table en   i varje tabellcell för att de skulle synas)

Inga problem...
Ligger kloss (dvs med sammamellanrum i bägge ledder)

Fast det är klart - du "överspecificerar" ju lite eftersom
1+130+1+130+1+130+1+130+1+130 + 1 <> 1+650+1 <> tabellens 650, så kanke om det eventuellt kan påverka när du har innehåll i tabellcellerna ?

Eller missuppfattar jag problemet på något sätt ?

ejickMedlem sedan mars 2001895 inlägg

19 mars 2004 15:56#4

Mika3l: Jag skall prova detta.

jarvklo: För tillfället är problemet i IE 5.5 men jag har haft det i senare versioner. Koden som återfinns är lite förenklad. Om man fyller mellanrummet med bilder blir det lite konstigt.

Jag kanske skulle skriva lite mer kod, eftersom jag har fortsatt lite..

<table width="650" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td width="130" bgcolor="#FFFFFF"></td> 
    <td width="130" bgcolor="#FFFFFF"></td> 
    <td width="130" bgcolor="#FFFFFF" colspan="2"></td> 
    <td width="130" bgcolor="#FFFFFF"></td> 
    <td width="130" bgcolor="#FFFFFF"></td> 
  </tr>
  <tr>
    <td width="650" bgcolor="#FFFFFF" colspan="6"></td>
  </tr>
  <tr>
    <td colspan="3"></td>
    <td colspan="3"></td>
  </tr>
</table>

Den sista kodsnutten förskjuter en hel del. men det kanske är bättre att göra en ny tabell istället?

jarvkloMedlem sedan juli 20013 378 inlägg

19 mars 2004 17:56#5

Hmm....
Ja då vart det ett annat läge...
Jag har också haft *stora* problem med tabeller där "inte alla celler används" och man kör med "överlappande colspans (som i ditt fall - det finns ingen enskild cell (dvs en utan colspan) som ligger med en kant på mittlinjen)

En lösning är naturligtvis att lägga till en rad med 6 celler... Men den är kanske inte användbar i ditt fall... Även om den lösningen funkar kanonbra!

MEN :i
Man kan ju använda sex stycken <col> till att ställa in samtliga kolumnbredder var för sig...
Vilket löser problemet i Mozilla men inte funkar i MSIE

MEN :i
Sedan kan man ju lägga på table-layout:fixed på tabellen också så att den beräknar cellbredder bara efter första raden...

Och *DÅ* funkar det i MSIE också - i varje fall i "standards mode" som den här koden ställer in både Mozilla och MSIE i:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
table {
  background-color:navy;
  table-layout:fixed;
}
td {background-color:#eeeeee}
-->
</style>
</head>
<body>
<table cellspacing="1" cellpadding="0">
  <col style="width:130px" />
  <col style="width:130px" />
  <col style="width:65px" />
  <col style="width:65px" />
  <col style="width:130px" />
  <col style="width:130px" />
  
  <tr>
    <td>&amp;nbsp;</td> 
    <td>&amp;nbsp;</td> 
    <td colspan="2">&amp;nbsp;</td> 
    <td>&amp;nbsp;</td> 
    <td>&amp;nbsp;</td> 
  </tr>
  <tr>
    <td colspan="6">&amp;nbsp;</td>
  </tr>
  <tr>
    <td colspan="3">&amp;nbsp;</td>
    <td colspan="3">&amp;nbsp;</td>
  </tr>
</table>
</body>
</html>

Testa: http://member.webforum.nu/2241/ejicks_sexkolumnerstabell.html

Sedär - så vart det ju till slut en lösning mha mestadels CSS också ju :birp

ejickMedlem sedan mars 2001895 inlägg

20 mars 2004 03:16#6

Tack så mycket för lösningen!

Var det inte klurigare än så? Jag har stött på problemet så många gånger att jag har ansett det som olösligt.. :bire

jarvkloMedlem sedan juli 20013 378 inlägg

20 mars 2004 08:26#7

Jag med - tills jag klurade på ditt problem och råkade få några infall ;)

wF när det är som bäst ! :bire