Notifikationer

Markér alle som læst Log ud

benner Nybegynder

09. juli 2007 - 10:43 Der er 7 kommentarer og
1 løsning

Fast 1. kolonne i bred tabel

Hej

Jeg har en bred tabel, hvor informationerne i 1. kolonne helst skal være synlige selv om man vil se den sidste kolonne. Altså vil jeg gerne have mulighed for at scrolle kolonne 2 til x.

Kan det lade sig gøre uden at bruge frames?
Tabellen er nemlig også lang!

På forhånd tak
Benner

Synes godt om

frank74 Nybegynder

09. juli 2007 - 11:03 #1

Følger lige med her. ;-)

Synes godt om

oskar Nybegynder

09. juli 2007 - 11:25 #2

Ja, sådan da.

I spalte 1 kan du lave en flydende div som i denne flydende menu: http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

Synes godt om

benner Nybegynder

09. juli 2007 - 11:48 #3

Nu har jeg ikke så meget erfaring med layers, men kan jeg få den til at følge med ud af skærmen når jeg scroller op/nej, men blive på sin plads når jeg scroller højre/venstre?

Min tabel indeholder følgende:

Navn1 <-> Oplysninge 1a - oplysninge 1b - oplysninge 1c ... oplysninge 1å
Navn2 <-> Oplysninge 2a - oplysninge 2b - oplysninge 2c ... oplysninge 2å
Navn3 <-> Oplysninge 3a - oplysninge 3b - oplysninge 3c ... oplysninge 3å
...
NavnX <-> Oplysninge Xa - oplysninge Xb - oplysninge Xc ... oplysninge Xå

Altså skal det være muligt at se Navn, når man checker "oplysning å"

Synes godt om

oskar Nybegynder

09. juli 2007 - 20:24 #4

Efter nøjere gennemlæsning af dine indlæg kan jeg se at mit forslag ikke rigtig dur til noget. Umiddelbart ingen nye ideer...

Synes godt om

neoman Novice

09. juli 2007 - 20:37 #5

Prøv at google "fixed header table": så kan du finde masser af eksempler på hvordan man kan scrolle rækker i en tabel, mens headeren forbliver på plads.

Så kan du lave mekanikken om til at passe på en fast kolonne i stedet for.

Synes godt om

benner Nybegynder

11. oktober 2007 - 11:01 #6

Jeg opgiver at finde en løsning :-(

Synes godt om

olebole Juniormester

11. oktober 2007 - 18:58 #7

<ole>

Dette kunne måske være en løsning:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.scrollTblCont {
font: 13px tahoma, sans-serif;
width: 250px;
overflow-x: scroll;
}
#firstCol {
position: absolute;
width: 80px;
left: 0;
top: 0;
z-index: 1;
background: #ffffcc;
border-right: 1px solid #fd0;
}
.rightCont {
margin-left: 80px;
}
.scrollTblCont table {
border-collapse: collapse;
}
.scrollTblCont table td, #firstCol div {
padding: 1px 10px 2px 5px;
white-space: nowrap;
}
</style>
<script type="text/JavaScript">
function gP(o){for(var _x=_y=0;o!=null;_x+=o.offsetLeft,_y+=o.offsetTop,o=o.offsetParent);return {x:_x,y:_y}};

window.onload = function() {
var oTd, oDv, oFirstCol = document.getElementById("firstCol"),
oTmpl = oFirstCol.removeChild(oFirstCol.firstChild),
aTr = document.getElementById("tblBdy").getElementsByTagName("tr"),
css = oFirstCol.style, oP = gP(oFirstCol.parentNode);
css.top = oP.y + "px";
css.left = oP.x + "px";
for (var i=0,j=aTr.length; i<j; i++) {
oTd = aTr[i].getElementsByTagName("td")[0];
oDv = oTmpl.cloneNode(true);
oFirstCol.appendChild(oDv);
oDv.appendChild( document.createTextNode(oTd.firstChild.nodeValue) );
aTr[i].removeChild(oTd);
oTd = null;
}
}
</script>
</head>
<body>

<div style="padding:40px">

<div class="scrollTblCont">
<div id="firstCol"><div> </div></div>
<div class="rightCont">
<table>
<tbody id="tblBdy">
<tr>
<td>Navn 1</td>
<td>Info 1 1</td>
<td>Info 1 2</td>
<td>Info 1 3</td>
<td>Info 1 4</td>
</tr>
<tr>
<td>Navn 2</td>
<td>Info 2 1</td>
<td>Info 2 2</td>
<td>Info 2 3</td>
<td>Info 2 4</td>
</tr>
<tr>
<td>Navn 3</td>
<td>Info 3 1</td>
<td>Info 3 2</td>
<td>Info 3 3</td>
<td>Info 3 4</td>
</tr>
<tr>
<td>Navn 4</td>
<td>Info 4 1</td>
<td>Info 4 2</td>
<td>Info 4 3</td>
<td>Info 4 4</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</body>
</html>

/mvh
</bole>

Synes godt om

olebole Juniormester

11. oktober 2007 - 19:16 #8

- og det her er måske lidt fiksere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.scrollTblCont {
font: 13px tahoma, sans-serif;
width: 250px;
overflow-x: scroll;
}
#firstCol {
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: #ffffcc;
border-right: 1px solid #fd0;
}
.scrollTblCont table {
border-collapse: collapse;
}
.scrollTblCont table td, #firstCol div {
padding: 1px 10px 2px 5px;
white-space: nowrap;
}
</style>
<script type="text/JavaScript">
function gP(o){for(var _x=_y=0;o!=null;_x+=o.offsetLeft,_y+=o.offsetTop,o=o.offsetParent);return {x:_x,y:_y}};

window.onload = function() {
var oTd, oDv, oFirstCol = document.getElementById("firstCol"),
oTmpl = oFirstCol.removeChild(oFirstCol.firstChild),
aTr = document.getElementById("tblBdy").getElementsByTagName("tr"),
css = oFirstCol.style, oP = gP(oFirstCol.parentNode), nWidth = 0;
css.top = oP.y + "px";
css.left = oP.x + "px";
for (var i=0,j=aTr.length; i<j; i++) {
oTd = aTr[i].getElementsByTagName("td")[0];
oDv = oTmpl.cloneNode(true);
oFirstCol.appendChild(oDv);
oDv.firstChild.nodeValue = oTd.firstChild.nodeValue;
// Her skal du trække (padding-right + padding-left + border-right-width) fra.
// Her er det: (10 + 5 + 1)
oDv.style.width = (oTd.offsetWidth-16) + "px";
}
}
</script>
</head>
<body>

<div style="padding:40px">

<div class="scrollTblCont">
<div id="firstCol"><div> </div></div>
<div class="rightCont">
<table>
<tbody id="tblBdy">
<tr>
<td>Navn 1</td>
<td>Info 1 1</td>
<td>Info 1 2</td>
<td>Info 1 3</td>
<td>Info 1 4</td>
</tr>
<tr>
<td>Navn 2</td>
<td>Info 2 1</td>
<td>Info 2 2</td>
<td>Info 2 3</td>
<td>Info 2 4</td>
</tr>
<tr>
<td>Navn 3</td>
<td>Info 3 1</td>
<td>Info 3 2</td>
<td>Info 3 3</td>
<td>Info 3 4</td>
</tr>
<tr>
<td>Navn 4</td>
<td>Info 4 1</td>
<td>Info 4 2</td>
<td>Info 4 3</td>
<td>Info 4 4</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</body>
</html>

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
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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS