Header probleem bij een scrollable table

Status
Niet open voor verdere reacties.
B

BassmaniaQ

Gebruiker
Lid geworden
25 nov 2005
Berichten
15
Hallo,

Ik zit met mijn handen in het haar, want ik krijg het niet voor elkaar.

Ik heb een tabel met gegevens. Door de Div om de 2e tabel komt er een scollbalk als er teveel gegevens voor het scherm zijn. Het probleem is nu dat de velden van de eerste tabel en de 2e niet recht onder elkaar staan en dus verschuiven door de scrollbalk.
Ik weet niet hoe ik dit moet oplossen omdat de width dus wel in procenten moet wordebn uitgedrukt. Ik hoop dat iemand hier een oplossing voor heeft.
Alvast heel erg bedankt!!!

Maurice

Hieronder de code:

<table border="1" width="100%">
<tr>
<td class="toprow" width="8%">Vrachtnr.</td>
<td class="toprow" width="7%">Datum</td>
<td class="toprow" width="20%">Naam</td>
<td class="toprow" width="6%">Postc.</td>
<td class="toprow" width="5%">Huisnr.</td>
<td class="toprow" width="12%">Woonplaats</td>
<td class="toprow" width="6%">Gewicht</td>
<td class="toprow" width="4%">Colli</td>
<td class="toprow" width="5%">Pallets</td>
<td class="toprow" width="7%">Rembours</td>
<td class="toprow" width="13%">Status</td>
<td class="toprow" width="7%">Klantnr.</td>
</tr>
</table>

<div style="overflow: auto; height: 96%; width: 100%;">
<table border="1" width="100%">

<tr>
<td class="lowrow" width="8%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>
<td class="lowrow" width="20%">gegevens</td>
<td class="lowrow" width="6%">gegevens</td>
<td class="lowrow" width="5%">gegevens</td>
<td class="lowrow" width="12%">gegevens</td>
<td class="lowrow" width="6%">gegevens</td>
<td class="lowrow" width="4%">gegevens</td>
<td class="lowrow" width="5%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>
<td class="lowrow" width="13%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>

</tr>
</table>
</div>
 
mauricenijs,
De enige oplossing die ik je voor het moment kan voorstellen (als uw tabel wel degelijk horizontaal moet zijn ) is er één tabel van maken met 2 rijen.
Dan staan die altijd onder elkaar!
Code: 
<table border="1" width="100%">
<tr>
<td class="toprow" width="8%">Vrachtnr.</td>
<td class="toprow" width="7%">Datum</td>
<td class="toprow" width="20%">Naam</td>
<td class="toprow" width="6%">Postc.</td>
<td class="toprow" width="5%">Huisnr.</td>
<td class="toprow" width="12%">Woonplaats</td>
<td class="toprow" width="6%">Gewicht</td>
<td class="toprow" width="4%">Colli</td>
<td class="toprow" width="5%">Pallets</td>
<td class="toprow" width="7%">Rembours</td>
<td class="toprow" width="13%">Status</td>
<td class="toprow" width="7%">Klantnr.</td>
</tr>
<tr>
<td class="lowrow" width="8%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>
<td class="lowrow" width="20%">gegevens</td>
<td class="lowrow" width="6%">gegevens</td>
<td class="lowrow" width="5%">gegevens</td>
<td class="lowrow" width="12%">gegevens</td>
<td class="lowrow" width="6%">gegevens</td>
<td class="lowrow" width="4%">gegevens</td>
<td class="lowrow" width="5%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>
<td class="lowrow" width="13%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>

</tr>
</table>
 
ok maar dan komt er geen scrollbalk in de tabel als de tabel te groot wordt en dat is nu juist de bedoeling.
 
Wat bedoel met te groot?
Te breed of te lang of allebij.
Als je tabel te breedt wordt of te lang voor je scherm dan komen automatisch scrollbars in je browser.
Je kan ook je tabel in een iframe plaatsen en de scrollbars van het iframe op auto zetten.
 
de tabel wordt dus de lang. Ik wil niet de scrollbalk van de pagina gebruiken, maar een scrollbalk in een tabel. iframe kan ik nog proberen, maar je kan denk ik geen iframe in een iframe zetten of wel? en dat zou ik de iframe aan de resolutie moeten aanpassen, weet niet of dat gaat...
 
Laatst bewerkt:
Maurice,
Dit zou de oplossing kunnen zijn:
Code: 
<div style="overflow: auto; height: 96%; width: 100%;">
<table border="1" width="100%">
<tr>
<th class="toprow" width="8%">Vrachtnr.</td>
<th class="toprow" width="7%">Datum</td>
<th class="toprow" width="20%">Naam</td>
<th class="toprow" width="6%">Postc.</td>
<th class="toprow" width="5%">Huisnr.</td>
<th class="toprow" width="12%">Woonplaats</td>
<th class="toprow" width="6%">Gewicht</td>
<th class="toprow" width="4%">Colli</td>
<th class="toprow" width="5%">Pallets</td>
<th class="toprow" width="7%">Rembours</td>
<th class="toprow" width="13%">Status</td>
<th class="toprow" width="7%">Klantnr.</td>
</tr>
<tr>
<td class="lowrow" width="8%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>
<td class="lowrow" width="20%">gegevens</td>
<td class="lowrow" width="6%">gegevens</td>
<td class="lowrow" width="5%">gegevens</td>
<td class="lowrow" width="12%">gegevens</td>
<td class="lowrow" width="6%">gegevens</td>
<td class="lowrow" width="4%">gegevens</td>
<td class="lowrow" width="5%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>
<td class="lowrow" width="13%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>

</tr>
</table>

Zonder dank..
PP
 
Poppoll zei:
Maurice,
Dit zou de oplossing kunnen zijn:
Code: 
<div style="overflow: auto; height: 96%; width: 100%;">
<table border="1" width="100%">
<tr>
<th class="toprow" width="8%">Vrachtnr.</td>
<th class="toprow" width="7%">Datum</td>
<th class="toprow" width="20%">Naam</td>
<th class="toprow" width="6%">Postc.</td>
<th class="toprow" width="5%">Huisnr.</td>
<th class="toprow" width="12%">Woonplaats</td>
<th class="toprow" width="6%">Gewicht</td>
<th class="toprow" width="4%">Colli</td>
<th class="toprow" width="5%">Pallets</td>
<th class="toprow" width="7%">Rembours</td>
<th class="toprow" width="13%">Status</td>
<th class="toprow" width="7%">Klantnr.</td>
</tr>
<tr>
<td class="lowrow" width="8%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>
<td class="lowrow" width="20%">gegevens</td>
<td class="lowrow" width="6%">gegevens</td>
<td class="lowrow" width="5%">gegevens</td>
<td class="lowrow" width="12%">gegevens</td>
<td class="lowrow" width="6%">gegevens</td>
<td class="lowrow" width="4%">gegevens</td>
<td class="lowrow" width="5%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>
<td class="lowrow" width="13%">gegevens</td>
<td class="lowrow" width="7%">gegevens</td>

</tr>
</table>

Zonder dank..
PP
Klik om te vergroten...

bedankt voor de reactie, maar dan blijft de header niet staan boven de tabel... het moet zo zijn dat alleen de gegevens scrollable zijn zeg maar... sorry dat ik dit nog niet erinhad gezet...
 
Ik had zoiets al gedacht maar dat zal niet werken met een table in html en je zal er evenmin gegevens kunnen mee opslaan.
Je zal moeten werken met een database waar je gegevens kan uitlezen en wegschrijven.
Werken met php of cgi of met een serverside script gewoon met html zal dat niet werken.
 
defietser zei:
Ik had zoiets al gedacht maar dat zal niet werken met een table in html en je zal er evenmin gegevens kunnen mee opslaan.
Je zal moeten werken met een database waar je gegevens kan uitlezen en wegschrijven.
Werken met php of cgi of met een serverside script gewoon met html zal dat niet werken.
Klik om te vergroten...

de gegevens komen ook uit een database, maar ik dacht eigelijk dat dat al duidelijk was...
nouja ik ga maar weer verder proberen dan. maar de database heeft toch niet te maken met een html table of wel?

ik bedoel dus zoiets: http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html, alleen krijg ik de header dus niet recht boven de body van de tabel
 
Ik snap toch niet goed wat je wil: de headers moeten blijven staan en de gegevens moeten kunnen scrollen, maar ze moeten onder de headers blijven staan?
Dus elke cel moet apart kunnen scrollen? Dat lijkt me niet mogelijk maar ook niet handig.
 
Ah sorry, nu snap ik het. Alleen werkt het voorbeeld op die site niet in Opera.
 
Mag ik vragen waarom de width in procenten moet worden uitgedrukt? Het geeft weinig controle op hoe het eruit ziet aangezien het browservenster klein kan zijn. De cellen worden breder gemaakt als een woord er niet in past.
 
keej zei:
Mag ik vragen waarom de width in procenten moet worden uitgedrukt? Het geeft weinig controle op hoe het eruit ziet aangezien het browservenster klein kan zijn. De cellen worden breder gemaakt als een woord er niet in past.
Klik om te vergroten...

dit komt omdat ik bij een grotere resolutie ook een grotere tabel wil hebben in de breedte...
is daar misschien dan een andere manier voor?
 
Maurice,
ik bedoel dus zoiets: http://web.tampabay.rr.com/bmerkey/e...le-header.html, alleen krijg ik de header dus niet recht boven de body van de tabel
Klik om te vergroten...
Ben daar eens gaan kijken, en toen werd er al veel duidelijker moet je eens naar het resutaat kijken
Eerst de externe CSS
Code: 
/*Basic styles separated to make sample code easier to follow*/

body {
	margin: 1em 6%;
	font-size: 90%;
	color: #444;
	line-height: 1.2;
	background-color: white;
	background-repeat: repeat-x;
	background-position: left top;
	}
	
#container {
	border: double 3px #bcc;
	background-color: white;
	padding: 1em 5%;
	}

h2,h3 {
	color: #699; 
	text-align: center;
	margin-bottom: .2em;
}

h3,h4 {
	margin-bottom: 0;
	margin-top: 0;
}

a, a.back {color: #39c}
a:hover {color: Coral}

pre {font-size: 85%}
small {font-size: 70%;}
code {color: #330099}

/* Global Print Styles*/
@media print {

.noprint {display: none;}

body {
	font-family:"Palatino Linotype", Georgia, Garamond, serif;
	background-image: none;
	}
	
#container {
	border: none;
	padding: 0;
	}

}
En nu de Html pagina met style van de table:
Code: 
<!-- This comment keeps IE6/7 in the reliable quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Scrollable Table with Fixed Header, repeat print header and footer</title>

<meta name="keywords" content="fixed table header; non-scroll header; fixed footer; freeze header; CSS tips; print repeating headers; print repeating footers">
<link rel="stylesheet" href="basic.css" type="text/css">


<style type="text/css">
div.tableContainer {
	width:60%;		/* table width will be 99% of this*//*HIER DE BREEDTE VAN DE TABEL INSTELLEN*/
	height: 120px; 	/* must be greater than tbody*/
	overflow: scroll; /*HIER OP SCROLL GEZET OM SCROLLBARS TE KRIJGEN*/
	margin: 0 auto;
	}

table {
	width: 99%;		/*100% of container produces horiz. scroll in Mozilla*/
	border: none;
	background-color: #f7f7f7;
	}
	
table>tbody	{  /* child selector syntax which IE6 and older do not support*/
	overflow: auto; 
	height: 100px; /* HIER DE HOOGTE VERANDEREN OM DE TABLE LANGER OF KORTER TE MAKEN*/
	overflow-x: hidden;
	}
	
thead tr	{
	position:relative; 
	top: expression(offsetParent.scrollTop); /*IE5+ only*/
	}
	
thead td, thead th {
	text-align: center;
	font-size: 14px; 
	background-color: oldlace;
	color: steelblue;
	font-weight: bold;
	border-top: solid 1px #d8d8d8;
	}	
	
/*td	{
	color: #000;
	padding-right: 2px;
	font-size: 12px;
	text-align: right;
	border-bottom: solid 1px #d8d8d8;
	border-left: solid 1px #d8d8d8;
	}
	
table tfoot tr { /*idea of Renato Cherullo to help IE*/
/*      position: relative; 
      overflow-x: hidden;
      top: expression(parentNode.parentNode.offsetHeight >= 
	  offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
      }


tfoot td	{
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	background-color: papayawhip;
	color: steelblue;
	border-top: solid 1px slategray;
	}
*/
td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

</style>



<!-- print style sheet -->
<style type="text/css" media="print">
div.tableContainer {overflow: visible;	}
table>tbody	{overflow: visible; }
td {height: 14pt;} /*adds control for test purposes*/
thead td	{font-size: 11pt;	}
tfoot td	{
	text-align: center;
	font-size: 9pt;
	border-bottom: solid 1px slategray;
	}
	
thead	{display: table-header-group;	}
tfoot	{display: table-footer-group;	}
thead th, thead td	{position: static; } 

thead tr	{position: static; } /*prevent problem if print after scrolling table*/ 
table tfoot tr {     position: static;    }


</style>

</head>

<body>

<div id="container">
  <div class="tableContainer">
    <table cellspacing="0">
      <thead>
        <tr>
          <td  width="8%">Vrachtnr.</td>
          <td  width="7%">Datum</td>
          <td  width="20%">Naam</td>
          <td  width="6%">Postc.</td>
          <td  width="5%">Huisnr.</td>
          <td  width="12%">Woonplaats</td>
          <td  width="6%">Gewicht</td>
          <td  width="4%">Colli</td>
          <td  width="5%">Pallets</td>
          <td  width="7%">Rembours</td>
          <td  width="13%">Status</td>
          <td  width="7%">Klantnr.</td>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <td width="8%">1</td>
          <td width="7%">2</td>
          <td width="20%">3</td>
          <td width="6%">4</td>
          <td width="5%">5</td>
          <td width="12%">6</td>
          <td width="6%">7</td>
          <td width="4%">8</td>
          <td width="5%">9</td>
          <td width="7%">10</td>
          <td width="13%">11</td>
          <td width="7%">12</td>
        </tr>
        <tr>
          <td width="8%">2</td>
          <td width="7%">gegevens</td>
          <td width="20%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="12%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="4%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="7%">gegevens</td>
          <td width="13%">gegevens</td>
          <td width="7%">gegevens</td>
        </tr>
        <tr>
          <td width="8%">3</td>
          <td width="7%">gegevens</td>
          <td width="20%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="12%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="4%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="7%">gegevens</td>
          <td width="13%">gegevens</td>
          <td width="7%">gegevens</td>
        </tr>
        <tr>
          <td width="8%">4</td>
          <td width="7%">gegevens</td>
          <td width="20%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="12%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="4%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="7%">gegevens</td>
          <td width="13%">gegevens</td>
          <td width="7%">gegevens</td>
        </tr>
         <tr>
          <td width="8%">5</td>
          <td width="7%">gegevens</td>
          <td width="20%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="12%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="4%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="7%">gegevens</td>
          <td width="13%">gegevens</td>
          <td width="7%">gegevens</td>
        </tr>
         <tr>
          <td width="8%">6</td>
          <td width="7%">gegevens</td>
          <td width="20%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="12%">gegevens</td>
          <td width="6%">gegevens</td>
          <td width="4%">gegevens</td>
          <td width="5%">gegevens</td>
          <td width="7%">gegevens</td>
          <td width="13%">gegevens</td>
          <td width="7%">gegevens</td>
        </tr>
       
     </tbody>
    </table>
  </div>
</div> 
<!-- end container -->
</body>
</html>
De Externe css opslaan als basic.css dan moet je niets veranderen in de Html pagina
Ik heb ook in de externe css (in hoofdletters aangeduid wat je kan veranderen om de tabel breder of langer te maken.
suc6
 
Ik bedoelde: als de resolutie groter is gaat je tabel op deze manier wel groter zijn, maar als de resolutie te klein is, dan gaan de kolommen te smal worden om alle gegevens er nog in te krijgen (een woord staat sowieso op 1 regel, daarom vind ik het geen goed idee). Tenzij je niet vasthoudt aan de percentages. Anders is de code om vaste groottes voor de cellen te hebben
HTML: 
style="table-layout: fixed"
in het table-element. In het andere geval worden alle cellen groot genoeg gemaakt zodat ze minstens zo breed zijn als het breedste woord.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan