Søg
Avatar billede hooh Nybegynder
05. juli 2004 - 19:03 Der er 11 kommentarer og
2 løsninger

scrolle i en html table undtagen første række

Hej

Hvordan laver jeg en tabel som kan scrolle undtagen første række


Jeg har nogle overskrifter i en tabel og når jeg får for mange data, så bliver jeg nød til at scrolle ned og så kan jeg ikke følge med da overskrifterne også scroller med.

Har nogen nogle forslag til en løsning?
Avatar billede Slater Ekspert
05. juli 2004 - 19:11 #1
Læg overskrifterne i en anden tabel?
Avatar billede hooh Nybegynder
05. juli 2004 - 19:15 #2
ja, men så er det ikke sikkert bredden passer sammen.

Overskrifterne skulle helst følge kolonnerne
Avatar billede syvon Nybegynder
05. juli 2004 - 21:17 #3
eller læg 2 div ind

eksempel:

<html>
<head>
<style type="text/css">
div.scroll{overflow:auto;height:100px;width:100px;border:1px solid #000;padding:3px;}
div.headline{height:20px;width:100px;text-align:center;border:1px solid #000;}
</style>
</head>
<body>
<table width="300" height="300" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td></td>
</tr>
<tr>
    <td>
    <div class="headline">overskrift</div>
    <div class="scroll">indhold</div></td>
</tr>
<tr>
    <td></td>
</tr>
</table>
</body>
</html>
Avatar billede roenving Novice
06. juli 2004 - 00:57 #4
Den eneste måde, jeg kan se, at man kan gøre det, er at gøre, som syvon beskriver, og onload synkronisere bredden for tabellerne ...

Men det er jo ikke helt nemt, for man kan ikke 'bare' tage den ene tabels celle-bredder og overføre på den anden ...

Måske kan man finde på noget man en 'skygge'-række i scroll-area med samme indhold som rækken udenfor, men skjule rækken i scroll-feltet !-)
Avatar billede hooh Nybegynder
06. juli 2004 - 10:55 #5
syvon: jeg kan ikke rigtig bruge det.

For ejg har flere rækker og alle rækker skal passe med hinanden.

fx.
navn, pris1, pris2, pris3, moms, total (og mere endnu)

i dit tilfælde- hvis en linie bliver delt op i 2 så passer rækkerne ikke med rækkerne i den anden kolonne.

men måske er der noget i det roenving siger.

Man må da kunne finde bredden på en celle og så sætte headeren til samme bredde tilsidst.

ik??
Avatar billede hooh Nybegynder
06. juli 2004 - 11:22 #6
jeg har lavet denne funktion som finder bredden på cellen.

<html>
<head>
<script>
var h;
function checkHeight() {
  h = document.getElementById("cellwidth").offsetWidth;
  alert(h);
}
</script>
</head>
<body onload="checkHeight()">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td id="cellwidth">hejd sdfsdf</td>
</tr>
<tr>
    <td>hejd sdfsdf dsfd fdf sdf sdf s sdfsdf</td>
</tr>
<tr>
    <td>hejd dsfd fdf sdffsdfsdf sd f</td>
</tr>
</table>
</body>
</html>

så mangler vi kun hvordan jeg ændrer bredden på en celle via en funktion
Avatar billede hooh Nybegynder
06. juli 2004 - 12:00 #7
her er den færdige kode, hvis nogen skulle få brug for den.

hvis nogen har en kommentar til hvordan den kan forbedres så er de meget velkommen til at skrive..

<html>
<head>
<script>
var h;
function changetable() {
checkWidth("cell1");
checkWidth("cell2");
checkWidth("cell3");
}
function checkWidth(name) {
  width = document.getElementById(name).offsetWidth;
  changeWidth('header_'+name, width);
}

function changeWidth(lname, lwidth)
{
var x=document.getElementById(lname).width = lwidth-5
//jeg trækker 5 fra da det passer bedre på webben - spørg ikke hvorfor
}
</script>
</head>
<body onload="changetable()">

<table>
    <tr>
        <td id="header_cell1"><b>header</b></td>
        <td><td>
        <td id="header_cell2"><b>header</b></td>
        <td></td>
        <td id="header_cell3"><b>header</b></td>
    </tr>
</table>
<div style='overflow:auto; height=50;'>

<table>
<tr>
    <td bgcolor="gray">En lille tekst</td>
    <td></td>
    <td height=20>her en en mellem tekst som virker</td>
    <td></td>
    <td bgcolor="gray">her er en lidt længere tekst, som også virker</td>
</tr>
<tr>
    <td bgcolor="gray">En lille tekst</td>
    <td></td>
    <td height=20>her en en mellem tekst som virker</td>
    <td></td>
    <td bgcolor="gray">her er en lidt længere tekst, som også virker</td>
</tr>
<tr>
    <td bgcolor="gray">En lille tekst</td>
    <td></td>
    <td height=20>her en en mellem tekst som virker</td>
    <td></td>
    <td bgcolor="gray">her er en lidt længere tekst, som også virker</td>
</tr>
<tr>
    <td bgcolor="gray">En lille tekst</td>
    <td></td>
    <td height=20>her en en mellem tekst som virker</td>
    <td></td>
    <td bgcolor="gray">her er en lidt længere tekst, som også virker</td>
</tr>
<tr>
<!-- jeg har sat cellerne med id'er til sidst -->
    <td id="cell1" bgcolor="gray"></td>
    <td></td>
    <td id="cell2" height=20></td>
    <td></td>
    <td id="cell3" bgcolor="gray"></td>
</tr>
</table>

</div>
</body>
</html>
Avatar billede roenving Novice
06. juli 2004 - 14:55 #8
Du får problemet, når:

<table>
    <tr>
        <td id="header_cell1"><b>Dette er en lang overskrift til en lille tekst</b></td>
        <td><td>
        <td id="header_cell2"><b>header</b></td>
        <td></td>
        <td id="header_cell3"><b>header</b></td>
    </tr>
</table>

-- derfor min bemærkning om skygge-rækken !-)
Avatar billede hooh Nybegynder
06. juli 2004 - 15:03 #9
jeg er ikke helt sikker på je forstår det med skygge.

Skal det så være en "usynlig skygge"??

for jeg vil jo helst ikke ha' en skygge på tabellen.
Avatar billede roenving Novice
06. juli 2004 - 15:30 #10
Ja, den enkleste er at du lægger række i den nederste tabel med nøjagtig samme indhold som overskriften, men f.eks. sætter en visibility:hidden; på tr-tagget ...
Avatar billede hooh Nybegynder
28. september 2004 - 20:57 #11
roenving: kan jeg få et svar fra dig!!
så kan du få halvdelen af pointene....
Avatar billede roenving Novice
29. september 2004 - 01:15 #12
Oki '-)
Avatar billede roenving Novice
03. oktober 2004 - 23:36 #13
Tak for point ;~}
Avatar billede 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.

Loading billede Opret Preview
Kategori
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
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
28 min siden Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
37 min siden problem med mailbesked Af Pestilensen i Excel
I dag 10:45 Powerbank Af postpeter@outlook.dk i Fri debat
22/0821:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
22/0820:06 email adresse Af Malm i Forslag til ændringer
White papers
Flere white papers »