Hvorfor får ikke tabellen samme farge på rammen?

Pallantir · 1. mai 2015

Jeg bruker denne koden for å gi en tabell en rød ramme:

Problemet er at den får to forskjellige farger:

Er det noe som kan forklare meg hvorfor? Jeg har ingen andre color statements i den tabellen, bortsett fra på teksten.

kjekset · 1. mai 2015

Har du prøvd å definere tabellen som table i css? Eksempel:

table {
border: 1px solid #C90001;
}

Har du prøvd i forskjellige nettlesere?

Er det fortsatt samme problem her? http://jsfiddle.net/b2ojhe8c/

Endret 1. mai 2015 av kjekset

Pallantir · 2. mai 2015

Takk! Jeg tenkte ikke på å sjekke flere nettlesere. Det er ikke noe problem i Internet Explorer (selv om den viser fargen litt mørkere enn ment), Chrome (som viser det helt riktig) eller mobile nettlesere. Det er Firefox som trøbler. Og det er den jeg bruker.

Når det gjelder å definere, har jeg så vidt begynt å bruke CSS, så jeg er totalt grønn foreløpig. Dette er den koden som gir tabellen (det i {{}} er variabler som setes inn av EventGhost, som driver webserveren:

<table border="10" bordercolor="#C90001" ; table align="center">

  <tr>
    <td align="center" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">Rom</span></td>
    <td align="center" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">Temp</span></td>
    <td align="center" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">Forrige måling</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">Signal</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">Ovn</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">Mål</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">Alarm</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[1]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['1']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['1']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['1']}}</span></div></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left"></a><img src="{{eg.globals.NettsideOvn['1']}}" alt="" width="25" height="25"></span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['1']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Alarmtemperatur1['1']}}</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> <a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[2]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['2']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['2']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['2']}}</span></div></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left"><img src="{{eg.globals.NettsideOvn['2']}}" alt="" width="25" height="25"></span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['2']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Alarmtemperatur1['2']}}</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[3]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['3']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['3']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['3']}}</span></div></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left"><img src="{{eg.globals.NettsideOvn['3']}}" alt="" width="25" height="25"></span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['3']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Alarmtemperatur1['3']}}</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[4]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['4']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['4']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['4']}}</span></div></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left"></a><img src="{{eg.globals.NettsideOvn['4']}}" alt="" width="25" height="25"></span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['4']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[5]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['5']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['5']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['5']}}</span></div></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left"></a><img src="{{eg.globals.NettsideOvn['5']}}" alt="" width="25" height="25"></span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['5']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> <a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[6]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['6']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['6']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['6']}}</span></div></td>
    <td align="center"><span style="font-family: arial; font-size: 200%; color: black">-</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['6']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[7]}}</a></span></td>
    <td align="center" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['7']}}</span></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Tid['7']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['7']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left"><img src="{{eg.globals.NettsideOvn['7']}}" alt="" width="25" height="25"></span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['7']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[12]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['12']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['12']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['12']}}</span></div></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left"><img src="{{eg.globals.NettsideOvn['12']}}" alt="" width="25" height="25"><br />
    </span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['12']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[11]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['11']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['11']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['11']}}</span></div></td>
    <td align="center"><p style="font-family:arial; font-size:200%; color:black; text-align:center"></a></a></a><img src="{{eg.globals.NettsideOvn['11']}}" alt="" width="25" height="25"></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['11']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/andre.html">{{eg.globals.Rom[13]}}</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['13']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"> {{eg.globals.Tid['13']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['13']}}</span></div></td>
    <td align="center"><p style="font-family:arial; font-size:200%; color:black; text-align:center"></a></a></a><img src="{{eg.globals.NettsideOvn['13']}}" alt="" width="25" height="25"></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Termostatemperatur['13']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/fryser.html">Fryseren</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['Fryser']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Tid['Fryser']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['Fryser']}}</span></div></td>
    <td align="center"><p style="font-family:arial; font-size:200%; color:black; text-align:center">-</a></a></a></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Alarmtemperatur2['Fryser']}}</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/fryser.html">Kjølerommet</a></span></td>
    <td align="center" nowrap><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['Kjolerom']}}</span></div></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Tid['Kjolerom']}}</span></td>
    <td align="center"><div align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['Kjolerom']}}</span></div></td>
    <td align="center"><p style="font-family:arial; font-size:200%; color:black; text-align:center">-</a></a></a></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">-</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Alarmtemperatur2['Kjolerom']}}</span></td>
  </tr>
  <tr>
    <td align="left" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left"><a href="http://min-nettside.com/skien.html">Utendørs</a></span></td>
    <td align="center" nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Romtemperatur['Ute']}}</span></td>
    <td nowrap><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Tid['Ute']}}</span></td>
    <td align="center"><span style="font-family:arial;font-size:200%;color:black;text-align:left">{{eg.globals.Signal['Ute']}}</span></td>
    <td align="center"><span style="font-family:arial; font-size:200%; color:black; text-align:center">-</span></td>
    <td align="center">-</td>
    <td align="center"><span style="font-family:arial; font-size:200%; color:black; text-align:center">-</span></td>
  </tr>
</table>

Jeg har ingen anelse om hvordan jeg definerer noe som helst der. Jeg ser jo radene og dataene (tr og td), jeg visste ikke at det måtte defineres noe mer. Når jeg setter denne koden inn i fiddle, får jeg samme problem med rammene. Denne koden er laget ved å skape en tabell i Dreamweaver, men jeg har en snikende mistanke om at det er veldig mye overflødig kode, og at alt kunne vært definert på noen få linjer, siden det er bare gjentakelser over hele linja. Stemmer det?

Edit: Jeg klarte å legge inn uredigert kode (med peker til nettsiden min) ved et uhell (kopierte den uredigerte istedenfor den redigerte, med "min-nettside.com" istedenfor. Rettet opp nå. Du har vel fått den uredigerte som varsel om innlegg, men det tar jeg ikke så tungt. Det er ikke så spennende greier, og i tillegg er det jo passord på webserveren.

Endret 2. mai 2015 av Pallantir

Pallantir · 3. mai 2015

Jeg har fått det til. Mye ryddigere med alt av CSS samlet i en fil, og så mye mindre i html-fila.

j-- · 4. mai 2015

Nå finnes vel heller ikke "bordercolor" som attribute HTML4.01/HTML5 (http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#borders / http://www.w3.org/TR/2014/REC-html5-20141028/tabular-data.html#the-table-element).

Pallantir · 4. mai 2015

Det stemmer sikkert. Jeg har snudd helt opp ned på hele koden og flyttet alt av style til en egen CSS-fil, så nå er det sånn:

#temperaturoversikt td {
border:6px double rgb(201, 0, 1);
}

#temperaturoversikt tr:first-child td {
border:6px double rgb(201, 0, 1);
text-align:center nowrap;
}

Jeg har skilt ut den øverste raden, som er overskriftene. Neste skritt blir å finne ut om jeg kan få den raden til å følge med når man blar seg nedover på mobiler (på en pc-skjerm er det plass til alt samtidig).

Sushifire · 6. mai 2015

Overskriftene i en tabell kan også settes opp med en <th> attributten

http://www.w3schools.com/tags/tag_th.asp

Endret 6. mai 2015 av Zts

Pallantir · 6. mai 2015

Takk!

Logg inn

Hvorfor får ikke tabellen samme farge på rammen?

Anbefalte innlegg

Pallantir

Lenke til kommentar

Videoannonse

kjekset

Lenke til kommentar

Pallantir

Lenke til kommentar

Pallantir

Lenke til kommentar

j--

Lenke til kommentar

Pallantir

Lenke til kommentar

Sushifire

Lenke til kommentar

Pallantir

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer