[html] Tabel met scrollbar

[_Thanatos_]

Ik heb het inmiddels voor elkaar gekregen om een tabel scrollend te maken, zonder dat ie in een iframe hoeft. Dit heb ik gedaan door de tabel in een div te plaatsen die de stijl "overflow:scroll" heeft, en een hoogte ingesteld heeft (anders valt er niets te scrollen). Ik heb daarvoor de volgende code gebruikt:

HTML:

<div id="testdiv" style="height: 100px; overflow: scroll">
<table border="1" id="testtable">
  <tr><td>test</td><td>test</td></tr>
  <!-- nog meer tr's -->
</table>
</div>

Nu zitten hier drie haken en ogen aan:

1. De div is 100% breedte en past zich niet aan aan de breedte van de tabel. Ik kan geen vast pixelbreedte gebruiken, omdat de tabel variabel van breedte kan zijn.
2. Ik zie nog een onnodige horizontale scrollbar. Die verschijnt in alle browsers, dus het is geen browserbug. Het lijkt me dat je die weg moet kunnen krijgen. Maar hoe? Ik zie in de CSS1/2-specs iig niets over het al of niet verbergen van scrollbars...
3. Ik kan m'n scrollwieltje niet gebruiken in mozilla en opera...

Probleem 1 heb ik overigens opgelost met het volgende javascriptje:

JavaScript:

testdiv.style.width = testdiv.offsetWidth - testdiv.clientWidth
   + testtable.offsetWidth + "px";

Maar als dan de tabel "opeens" van breedte verandert, klopt de breedte van de div weer niet... De style "width: auto" doet helaas niet wat ik verwacht (maar klopt technish wel), en de breedte met javascript bijhouden: geen id of dat wel kan.

Wie-o-wie helpt mij verder?

[disjfa]

div de breedte maken en je tabel die breedte overlaten nemen. (200px | inherit

met overflow:auto geeft hij alleen maar een scrollbar als hij nodig is.

[_Thanatos_]

Een breedte instellen kan niet, zei ik al. Bovendien vind ik dat niet zo netjes (het zou er in hoge en lage resoluties niet netjes uitzien). Misschien een onresize afvangen? mits het W3C compliant is natuurlijk?

"overflow:auto" werkt inderdaad prima... dat had ik niet verwacht

[Verwijderd]

Theoretisch zou ik denken:

code:

table{
 height:10em;
 overflow:auto;
}

Na het lezen van http://www.w3.org/TR/CSS21/tables.html#height-layout

The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders. Any other value specifies the height explicitly; the table may thus be taller or shorter than the height of its rows. CSS 2.1 does not specify rendering when the specified table height differs from the content height, in particular whether content height should override specified height; if it doesn't, how extra space should be distributed among rows that add up to less than the specified table height; or, if the content height exceeds the specified table height, whether the UA should provide a scrolling mechanism. Note. Future versions of CSS may specify this further.

Denk ik dat je een probleem hebt. CSS definieert hier niks over. CSS3 verandert de huidige tabel specificatie niet (blijft CSS2 + CSS21), dus je zul het iets anders moeten indelen.

Wat voor data komt er precies in?

edit:
'overflow' kent redelijk veel bugs e.d. in Mozilla

[ Voor 6% gewijzigd door Verwijderd op 13-01-2004 15:56 ]

[_Thanatos_]

Het mooiste zou idd een combinatie van height en overflow zijn, waardoor de inhoudt van de tabel opeens scrollbaar wordt. Maar uiteraard had ik dat ook geprobeerd.

Het lastige is misschien ook dat de tabel een header heeft, die moet blijven staan, en laat de header-indeling nou afhankelijk zijn van de inhoud (een kolom kan bijv breder worden als er meer tekst in staat).

De data die erin komt kan helaas verschillend zijn. Het achterliggende framework produceert gewoon "een tabel", maar wel volgens specs, dus met thead, tbody, nettte th's ipv tr's in de heading. Is trouwens ook aan te passen. Maar wat erin komt, kan dus verschillend zijn, met verschillend aantal kollommen (3 tot maximaal iets van 7) en een onbekend aantal rijen (rijen moet praktisch oneindig kunnen zijn).

[disjfa]

tabellen ondersteunen het attribuut overflow in css niet.

edit:
....tenzei je er een block element van maakt.......

[ Voor 38% gewijzigd door disjfa op 13-01-2004 16:14 ]

[Verwijderd]

Het probleem is dus dat browsers 'content-height' voorrang geven boven 'css-height'. Begrijpelijk, want voor een 'table-cell' gebeurt precies hetzelfde, dus waarom niet ook voor een tabel?

Uiteraard gaat het wel tegen de rest van de specificatie in, omdat browser 'css-height' behandelen als 'css-min-height' wat aan de ene kant goedgekeurt wordt door de specificatie (zie 'table-cell') en aan de andere kant open gelaten wordt (zie 'table').

[Verwijderd]

disjfa schreef op 13 januari 2004 @ 16:06:
tabellen ondersteunen het attribuut overflow in css niet.

Huh?! http://www.w3.org/TR/2003...ufx.html#propdef-overflow

Applies to: block-level and replaced elements, table cells, inline blocks

AFAIK, is 'table' block-level.