CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

danielbaek Nybegynder

01. december 2006 - 00:16 Der er 4 kommentarer og
1 løsning

Ændre farve på scrollbar i en tabel (tbody)

Hej,

Jeg forsøger at lave en tabel med scrollbar og har fået det til at lykkedes ved at bruge følgende <tbody> og <div style="overflow: auto; width: 359px; height: 375px;"> (jeg ved ikke om dette er det letteste, men det ser ud til at virke)

Er der en måde hvorpå jeg kan ændre farven på den scrollbar der kommer frem? (den blå farve som er standard i Firefox passer ikke just ind i designet...)

På forhånd tak...

Synes godt om

innercitydk Nybegynder

01. december 2006 - 09:58 #1

Det kan gøres meget simpelt. Indsæt følgende kode i headeren:

<style type="text/css">

body {scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f}

</style>

</head>

Alternativt kan du placere koden i dit stylesheet. Hvis du ikke vil have selve hovedsiden til at have farvede scrollbars kan du lave koden som en klasse:

<style type="text/css">

.ScroolBarColor {scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f}

</style>

i dit div tag skriver du så følgende:

<div style="overflow: auto; width: 359px; height: 375px;" class="ScroolBarColor">

Venlig hilsen

Nicki

Synes godt om

olebole Juniormester

01. december 2006 - 12:46 #2

<ole>

Kun hvis koden i udgangspunktet er dårlig (man har disabled CSS i IE), skal scrollbar-styles lægges på body-elementet. De bør lægges på dokument-elementet (det, der implementeres med html-tagget) ;o)

html {
scrollbar-3dlight-color:#ffd700;
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f
}

/mvh
</bole>

Synes godt om

danielbaek Nybegynder

05. december 2006 - 00:54 #3

Det virker desværre ikke...

Jeg ved ikke om det er fordi jeg bruger Firefox, men det skal selvfølgelig også virke i Firefox i sidste ende.

Er der en anden måde at lave en tabel med et scrollbar som man så kan ændre farven på?
Det skal helst være uden der skal implementeres noget i <Head>, altså det hele skal helst kunne indsættes i <body> feltet hvis det er muligt

Pt er det følgende kode jeg bruger:

<div style="width:250px; height:100px; overflow:auto">
<table>
<tr>
<td>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test<br>
test test test test test test test test test</td>
</tr>
</table>

Synes godt om

olebole Juniormester

05. december 2006 - 09:37 #4

Hvis det skal virke i FF, kommer du til at vente meget længe på 'den sidste ende' ;o)

Du kan kun ændre farven på scrollbars i IE og der er intet, der tyder på, det i fremtiden vil blive muligt i FF. Vil du kunne skifte farve X-browser, må du skrive din egen scroll-kontrol fra bunden

Synes godt om

danielbaek Nybegynder

02. marts 2007 - 12:47 #5

Tak for svar - og ja igen ser det jo ud som om du har ret ret olebole - desværre :(

Anyway tak for indput

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS