tbody overflow

[That Guy]

Goedenavond,


Ik was bezig met mijn tabel (dezelfde als de zebra-tabel) en liep tegen dit probleem op. Ik heb een tabel (data weggehaald):

<table id="playlist">

   <thead>
      <tr>
         <td><!-- id --></td>
         <td><!-- icon --></td>
         <td>Title</td>
         <td>Album</td>
         <td>Artist</td>
      </tr>
   </thead>

   <tbody>
      <!-- hier een ****load aan tr/td's -->
   </tbody>

</table>

en een CSS:

#playlist
{
   clear: left;
   cursor: pointer;

   width: 100%;/* !!! */

   border-spacing: 0;
   margin: 25px 0 0 0;
}


tbody
{
   display: block;

   width: 100%;
   height: 300px;
   overflow-y: scroll;

   /* test */
   border: 1px dotted #06f;
   background-color: #f0f;
}

nu, alles zou dus netjes 100% moeten zijn, en de tbody zou scrollable moeten zijn met een max hoogte van 300px. Dit werkt goed, maar de breedte van de tbody is opeens 1 pixel:

Wie kan mij vertellen hoe dit kan? Heb zelfs al alle container-elementen 100% width gemaakt, maar dat deed ook niets.



:thumb:

 

[That Guy]

Ik heb eens de breedte geforceerd, en wat blijkt, de tbody wil even breed zijn als de 1e thead td (denk ik (!)). Om een of andere reden. Zie dit screenshot:


:thumb:

[edit]mischien ook nog wel aardig om te vermelden, de tbody wordt door Javascript gevuld met tr/td's.[/edit]

 

[That Guy]

Ondertussen deze gevonden. Maar net zoals de TS daar ook al had, ik kan de kolom-breedte niet instellen (zelfs even geprobeert, maar dat werkte niet).


:thumb:

 

[That Guy]

Nog maar eens onder de aandacht brengen.

 

[pum]

Hopelijk heb je hier iets aan

<!-- 		eerste tabel -->
		<table width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td>titel</td>
				<td>album</td>
				<td>Artiest</td>
			</tr>
			<tr height="300" valign="top" >
				<td colspan="1">titels</td>
				<td colspan="1">albums</td>
				<td colspan="1">artiesten</td>
			</tr>
		</table>
		
<!-- 		tweede tabel -->
		<table width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td>titel</td>
				<td>album</td>
				<td>Artiest</td>
			</tr>
			<tr>
				<td colspan="3" height="300" valign="top">inhoud</td>
			</tr>
		</table>
		
<!-- derde tabel		 -->
		<table width="100%" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td>titel</td>
				<td>album</td>
				<td>Artiest</td>
			</tr>
			<tr>
				<td colspan="3">
					<table width="100%" height="300" cellpadding="20" cellspacing="0" border="0">
						<tr>
							<td valign="top">inhoud</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>

 

[csshunter]

Less is more?

• www.developerscorner.nl/csshunter/tests/zebra-tbody.htm

[edit]Excuus! FF en IE7 zijn o.k., maar Chrome, Opera en Safari niet (tonen niet de tbody-height)[/edit]