Trubbel med css och tabellramar

25 svar · 834 visningar · startad av @nders 10 juli 2003 · sida 2 av 2

Frågan, av @nders 10 juli 2003

Hepp! Jag är allt annat än kung på HTML och CSS, och har därför stött på lite patrull. Jag har en tabell, där jag vill ha en enpixels svart ram mellan alla ingående celler. Detta innebär tyvärr också celler som ligger i tabeller som ligger i den yttersta tabellen, och det är väl där problemet kommer, ramen blir förstår olika tjock på olika ställen. Jag tror att ni förstår vad jag vill ha. En sva

Läs frågan i sin helhet →

Engine^Medlem sedan dec. 20003 887 inlägg

11 juli 2003 12:19#21

Då kanske Contextual css kan hjälpa dig...
Gör en klass som heter .tblJarvklo och för alla css-detaljer du behöver använda i den tabellen döper du dessa klasser till .tblJarvklo .tdJarvklo

<style>
  .tblJarvklo { border-collapse: collapse; margin: 0; padding: 0 }
  .tblJarvklo td { border: 1px solid black; } [blue]// alla TD i tabellen tblJarvklo[/blue]
  .tblJarvklo .tdSpecial { border: 5px dashed jultomteröd; }
</style>

<table class="tblJarvklo">
  <tr>
    <td>hubba hubba</td>
    <td class="tdSpecial">Ho ho ho</td>
  </tr>
</table>

På så sätt borde du undvika möjliga krockar eller annan förvirring. Om det i en annan tabell skulle ligga en cell med cssklassnamnet tdJarvklo, så påverkas den inte av din css (förutsatt då att inte den tabellen av någon knäpp anledning också heter tblJarvklo).

@ndersMedlem sedan juni 200032 969 inlägg

11 juli 2003 12:28#22

Annan förvirring har jag inte lyckats undvika. Jag är totalförvirrad just nu. ;)

Det är ungefär så jag tänkte att jag skulle göra, men jag får inte ihop det. Jag hittade på namnet newtable. Jag lade sedan till det på alla css-grejerna, och lade till class="newtable" i <table>-taggen. Så här blev det:

.newtable {border-collapse:collapse; border-top:1px solid black; border-left:1px solid black}
.newtable tr {vertical-align:top;padding:0;}
.newtable td {vertical-align:top;padding:0;}
.newtable .rad {width:100%; height:100%;border:none; height:120px;}
.newtable .rad td {border:none;border-right: 1px solid black; border-bottom: 1px solid black;}
.newtable div {padding:2px;}
.newtable .inuti {margin:-1px;padding:0;}
.newtable .inuti table {border:1px solid black; width:100px;}
.newtable .inuti table td {padding:2px;}

Resultatet blev inte helt hundra (se bifogad bild).

Tack!

Engine^Medlem sedan dec. 20003 887 inlägg

11 juli 2003 12:36#23

Tja... problemet är padding, men det är ju rätt tydligt. Eftersom padding ärvs, så ska du vara försiktig med att stoppa in det på för många ställen och samma gäller margin.

Jag skulle börja med att sätta alla padding och margin till 0 och sedan börja från toppen och se hur arven fungererar.

@ndersMedlem sedan juni 200032 969 inlägg

14 juli 2003 17:33#24

Tack för all hjälp allihopa, även om vi inte lyckades lösa uppgiften. :)

Jag ska säga till min uppdragsgivare att antingen anställa en jäkla designer, eller nöja sig med medelmåttigt. ;)

Mvh och tack igen.

jarvkloMedlem sedan juli 20013 378 inlägg

14 juli 2003 19:42#25

Hmm...

Du ger upp för lätt ;)

Colspan-metoden (ursprungsexemplet lite omhackat):
http://member.webforum.nu/2241/snabelanderstabell.html ... Den blev till slut inte så bra i MSIE kanske även om det teoretiskt borde se bra ut även där ;)

med en "tabell per rad" istället:
http://member.webforum.nu/2241/snabelanderstabell2.html

Men som sagt... Bara testat i Moz1.3 och MSIE6 ;)

@ndersMedlem sedan juni 200032 969 inlägg

14 juli 2003 19:44#26

Ger upp och ger upp. Jag har helt enkelt inte arbetstid nog pilla med sånt här, som jag inte förstår. ;)

Men, jag ska kika på exemplen i morgon. Under arbetstid. ;)

Tack så enormt mycket för all hjälp! :f

Mvh