---

Jeg har tidligere spurgt om hvordan man
sætter en forskellige bredde på kolonnerne
i den samme tabel og fik følgende svar -

....
....
td {
width:100px; /* 1. søjle */
}
td+td {
width:200px; /* 2. søjle */
}
td+td+td {
width:100px; /* 3. søjle */
}
</style>
<table>
<tr><td>1<td>januar<td>100
<tr><td>2<td>februar<td>100
<tr><td>3<td>marts<td>100

Denne metode virker dog ikke i IE 7, hvilket
jeg meget gerne ville have. Jeg kunne forstå
at man også kan bruge CSS, men blev anbefalet
at vise disse data i en tabel. Hvordan ville
man gøre dette i IE 7 ?

---

On 26 Nov., 14:30, SpookiePower <boxjunk2...@gmail.com> wrote:
> td {
> width:100px; /* 1. søjle */}
>
> td+td {
> width:200px; /* 2. søjle */}
>
> td+td+td {
> width:100px; /* 3. søjle */}
>
> </style>

Prøv i stedet
td.bredde100 {
width: 100px;
}

td.bredde200 {
width: 200px;
}

.bredde100 fortæller at din class ved navn "bredde100" skal bruge
dette. Dit forslag med td+td ... har jeg aldrig set før.

> <table>
> <tr><td>1<td>januar<td>100
> <tr><td>2<td>februar<td>100
> <tr><td>3<td>marts<td>100


Du mangler at afslutte dine td'er, tr'er og table. Hvis du samtidig
kombinerer med ovenstående foreslag til brug af class vil det se
således ud:

<table>
<tr>
<td class="bredde100">1</td>
<td class="bredde200">januar</td>
<td class="bredde100">100</td>
</tr>

<tr>
<td class="bredde100">2</td>
<td class="bredde200">februar</td>
<td class="bredde100">100</td>
</tr>

<tr>
<td class="bredde100">3</td>
<td class="bredde200">marts</td>
<td class="bredde100">100</td>
</tr>
</table>

> Denne metode virker dog ikke i IE 7, hvilket
> jeg meget gerne ville have. Jeg kunne forstå
> at man også kan bruge CSS, men blev anbefalet
> at vise disse data i en tabel. Hvordan ville
> man gøre dette i IE 7 ?

Jeg undrer mig over at dit eksempel har virket i andre browsere end
IE7. Din kode må _aldrig_ blive browser specifik hvis du på nogen som
helst måde kan undgå det. I stedet vil alle html-nørder forhåbentlig
anbefale dig at skrive kode, som retter sig efter de gældende
standarder - hvilket langt hen af vejen vil give dig det samme
korrekte resultat i alle browsere.

Venlig hilsen

Jesper Lützen

---

Jesper Lützen skrev:

> Jeg undrer mig over at dit eksempel har virket i andre browsere end
> IE7.

Det skyldes at det er gyldig kode.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

---

Jesper Lützen wrote:

<snip>

Tak for din hjælp.

> Jeg undrer mig over at dit eksempel har virket i andre browsere end
> IE7.

Det virker fint nu som det skal, både i Firefox og IE 7.
Hvorfor det ikke virkede før fatter jeg ikke.

Men der er dog een ting som ikke virker i IE 7.

Teksten i to af kolonnerne skal venstre-stilles,
mens den sidste skal højre-stilles. Jeg har gjort
det på følgende måde -


   td {
      width:30px; /* 1. søjle */
      text-align:left
   }
   td+td {
      width:100px; /* 2. søjle */
      text-align:left
   }
   td+td+td {
      width:30px; /* 3. søjle */
      text-align:right

Dette virker i Firefox.
Hvad kan jeg gøre for at få det til at virke i IE 7 ?

---

SpookiePower skrev:

> Teksten i to af kolonnerne skal venstre-stilles,
> mens den sidste skal højre-stilles. Jeg har gjort
> det på følgende måde -

[klip]

> Dette virker i Firefox.
> Hvad kan jeg gøre for at få det til at virke i IE 7 ?

Det virker i IE7.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/

---

Jesper Lützen skrev:

> Du mangler at afslutte dine td'er, tr'er og table.

Afslutning af td og tr er ikke obligatorisk i html. Table skal til
gengæld afsluttes (og det er af overskuelighedsgrunde også en god
ide at gøre det med td og tr).


> <table>
> <tr>
> <td class="bredde100">1</td>
> <td class="bredde200">januar</td>
> <td class="bredde100">100</td>
> </tr>
>
> <tr>
> <td class="bredde100">2</td>

Det er ikke nødvendigt at sætte klasserne på andet end den første
række. Kolonnebredden kan ikke variere fra række til række.

Man kan i øvrigt nemt komme ud for at en af kolonnerne bliver
bredere end det der er specificeret - hvis indholdet i en celle er
bredere end cellens definerede bredde, vil cellen blive udvidet
uanset breddeangivelsen.


--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

SpookiePower wrote:
> Jeg har tidligere spurgt om hvordan man
> sætter en forskellige bredde på kolonnerne
> i den samme tabel og fik følgende svar -
>
> ...
> ...
> td {
> width:100px; /* 1. søjle */
> }
> td+td {
> width:200px; /* 2. søjle */
> }
> td+td+td {
> width:100px; /* 3. søjle */
> }
> </style>
> <table>
> <tr><td>1<td>januar<td>100
> <tr><td>2<td>februar<td>100
> <tr><td>3<td>marts<td>100
>
> Denne metode virker dog ikke i IE 7, hvilket
> jeg meget gerne ville have. Jeg kunne forstå
> at man også kan bruge CSS, men blev anbefalet
> at vise disse data i en tabel. Hvordan ville
> man gøre dette i IE 7 ?

Du kan prøve at hente
Dean Edwards fantaske IE behavior patch
(noget javascript)
http://dean.edwards.name/IE7/

<http://dean.edwards.name/IE7/compatibility/super-dynamic.html>
Giver ihvertfald et eksempel på at p+p virker i IE7 ved at bruge dette.

---

Martin skrev:

> Du kan prøve at hente
> Dean Edwards fantaske IE behavior patch
> (noget javascript)

Jeg kan sagtens få en simpel tabel til at fungere
uden at skulle blande javascript ind - også i IE7

--
Allan Vebel
http://html-faq.dk

---

Allan Vebel wrote:
> Martin skrev:
>
>> Du kan prøve at hente
>> Dean Edwards fantaske IE behavior patch
>> (noget javascript)
>
> Jeg kan sagtens få en simpel tabel til at fungere
> uden at skulle blande javascript ind - også i IE7

Ja... men kan du få stylesheetet til at virke også?

td {
width:100px; /* 1. søjle */
}
td+td {
width:200px; /* 2. søjle */
}
td+td+td {
width:100px; /* 3. søjle */
}

---

Martin skrev:

> Ja... men kan du få stylesheetet til at virke også?

IE forstår ikke +-operatoren i css. Hvorfor er du så forhippet på
at bruge den?

> td {
> width:100px; /* 1. søjle */
> }
> td+td {
> width:200px; /* 2. søjle */
> }
> td+td+td {
> width:100px; /* 3. søjle */
> }

Metoden her er bøvlet - ikke bare fordi IE ikke forstår den, men
også fordi den let kan misforstås. Kommentarerne herover er jo ikke
dækkende for hvad der rammes. Td rammer alle, td+td rammer alle
pånær celler i første kolonne, td+td+td rammer alle pånær celler i
de første to kolonner. På grund af kaskadereglerne får man et
resultat som det skitserede - med den tilføjelse at hvis der er
flere end tre kolonner, vil de få samme bredde som nr. 3.

Hvis man vil arbejde med egenskaber på kolonnebasis, er der et
element til det samme - nemlig <col>. Det er godt nok ret begrænset
hvor meget man kan sætte på det, fordi html-tabeller er bygget op
af rækker og ikke kolonner - og et DOM-element kun kan have ét
moderelement.

En løsning helt uden css kan ses her:

<table>
<col width="100"><col width="200"><col width="100">
<tr>
<td>1</td><td>januar</td><td>100</td>
</tr>
<tr>
<td>2</td><td>februar</td><td>100</td>
</tr>
<tr>
<td>3</td><td>marts</td><td>100</td>
</tr>
</table>

- og den virker i IE såvel som i alle andre gængse browsere. Man
kan evt. flytte breddeangivelserne ud i et css-ark.

--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:
> Martin skrev:
>
>> Ja... men kan du få stylesheetet til at virke også?
>
> IE forstår ikke +-operatoren i css. Hvorfor er du så forhippet på
> at bruge den?

Ikke mig - men nu var det jo sådan set spørgsmålet gik ud på i dette emne :)


>
>> td {
>> width:100px; /* 1. søjle */
>> }
>> td+td {
>> width:200px; /* 2. søjle */
>> }
>> td+td+td {
>> width:100px; /* 3. søjle */
>> }
>
> Metoden her er bøvlet - ikke bare fordi IE ikke forstår den, men
> også fordi den let kan misforstås. Kommentarerne herover er jo ikke
> dækkende for hvad der rammes. Td rammer alle, td+td rammer alle
> pånær celler i første kolonne, td+td+td rammer alle pånær celler i
> de første to kolonner. På grund af kaskadereglerne får man et
> resultat som det skitserede - med den tilføjelse at hvis der er
> flere end tre kolonner, vil de få samme bredde som nr. 3.

Bonus spørgsmål!
Hvis man nu ville lave en tabel der skiftede farve i hver 2. række - og
ikke "gider" at skrive klasser på td'erne - kan du også finde på en
smart måde til det? - Ligesom nedenstående, som egentlig er ret smart :)

> <table>
> <col width="100"><col width="200"><col width="100">
> <tr>
> <td>1</td><td>januar</td><td>100</td>
> </tr>
> <tr>
> <td>2</td><td>februar</td><td>100</td>
> </tr>
> <tr>
> <td>3</td><td>marts</td><td>100</td>
> </tr>
> </table>
>
> - og den virker i IE såvel som i alle andre gængse browsere. Man
> kan evt. flytte breddeangivelserne ud i et css-ark.
>

---

Martin skrev:

> Hvis man nu ville lave en tabel der skiftede farve i hver 2.
> række - og ikke "gider" at skrive klasser på td'erne - kan du
> også finde på en smart måde til det?

Hvis det er rækkerne du mener, kan du bare sætte en klasse på tr-
elementerne. Hvis du mener kolonner, kan du principielt godt sætte
farven på col-elementet (eller en klase til denne) - MEN... det
virker kun hvis der ikke er sat en farve på td-elementet. Selv om
reglerne for specificitet siger at en klassedefition vægtes højere
end en elementdefinition, vil td-reglen vinde over col-reglen hvis
de begge definerer det samme:

   td{ color: blue; }
   col.red{ color: red; }


--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Martin skrev:

> Bonus spørgsmål!
> Hvis man nu ville lave en tabel der skiftede farve i hver 2. række - og
> ikke "gider" at skrive klasser på td'erne - kan du også finde på en
> smart måde til det? - Ligesom nedenstående, som egentlig er ret smart :)

Man kunne vel lave en løkke, der løb igennem
tr-elementerne
(var rows = document.getElementByTagName("tr"))
og så tilskrev hveranden en baggrundsfarve?

Der må være en ligning for at finde hvert
andet objekt i en lineær række af objekter.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

On Wed, 28 Nov 2007 10:02:33 +0100, Martin <maaNO@SPAMscandesigns.dk>
wrote:

>Bonus spørgsmål!
>Hvis man nu ville lave en tabel der skiftede farve i hver 2. række - og
>ikke "gider" at skrive klasser på td'erne - kan du også finde på en
>smart måde til det? - Ligesom nedenstående, som egentlig er ret smart :)

Det er nemmest at lave serverside (fx ASP elelr PHP).
Hint: Hver gang man støder på udtrykket "ikke gider" lave et eller andet
gentaget arbejde på en hjememside, så er løsningen oftest serverside

PS: Gider du tage et kig på:
<url: http://www.usenet.dk/netikette/citatteknik.html>

--
Jørn Andersen,
Brønshøj

---

Jørgen Farum Jensen skrev:

> (var rows = document.getElementByTagName("tr"))
> og så tilskrev hveranden en baggrundsfarve?
>
> Der må være en ligning for at finde hvert
> andet objekt i en lineær række af objekter.

Man behøver slet ingen ligning - man kan bare springe hver anden
over i gennemløbet:

   for (i=1;i<rows.length;i=i+2){
       rows[i].style.backgroundColor = "green";
   }

- testet i Firefox med JavaScript Shell 1.4
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen skrev:

> Man behøver slet ingen ligning - man kan bare springe hver anden
> over i gennemløbet:
>
>    for (i=1;i<rows.length;i=i+2){
>        rows[i].style.backgroundColor = "green";
>    }

Sæføli! Hvorfor er vi nogen der altid
kigger efter komplicerede løsninger før
vi kigger efter de enkle?

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

On 26 Nov., 15:58, Bertel Lund Hansen <unosp...@lundhansen.dk> wrote:
> > Jeg undrer mig over at dit eksempel har virket i andre browsere end
> > IE7.
>
> Det skyldes at det er gyldig kode.

Se, det kommer bag på mig. Har du et link til noget dokumentation for
den måde at skrive sit CSS på?

Venlig hilsen

Jesper Lützen

---

Jesper Lützen skrev:

> Se, det kommer bag på mig. Har du et link til noget dokumentation for
> den måde at skrive sit CSS på?

Jeg puttede et eksempel i noget kode (CSS i HTML-koden) og
validerede det på W3. Nul fejl. Jeg ved ikke hvor det er omtalt.

--
Bertel
http://bertel.lundhansen.dk/   FIDUSO: http://fiduso.dk/