Man kan ha ner till 1x1 pixel om man vill, men du har förmodligen bara missat att ställa in font-size: eller line-height: på cellerna i de "små" raderna (även ett mellanslag "sträcker ut" en tabellcell om det inte får plats pga att typsnittets höjd eller bredd är större än cellens givna mått ;) )
Exempel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
table {
border-collapse:collapse; /* Bort med mellanrum mellan cellerna */
border:none; /* border-bredden läggs till utöver höjd/bredd */
padding:0; /* Bort med mellanrum mellan kant och cell */
}
tr.fem td {
height:5px;
width:5px;
border:none; /* border-bredden läggs till utöver höjd/bredd */
padding:0; /* Bort med padding - buggar kan visst ställa till det i vissa läsare har jag hört */
margin:0; /* Garantera att utrymme mellan celler (i praktiken!) är noll */
/* Glöm inte storleken på typsnittet! - Även ett &nbsp; tar plats och kan utvidga en liten cell! */
font-size: 1px;
}
tr.tio td {
height:10px;
width:10px;
border:none; /* border-bredden läggs till utöver höjd/bredd */
padding:0; /* Bort med padding - buggar kan visst ställa till det i vissa läsare har jag hört */
margin:0; /* Garantera att utrymme mellan celler (i praktiken!) är noll */
/* Glöm inte storleken på typsnittet! - Även ett &nbsp; tar plats och kan utvidga en liten cell! */
font-size: 1px;
}
-->
</style>
</head>
<body>
<table>
<tr class="fem">
<td style="background-color:red">&nbsp;</td>
<td style="background-color:green">&nbsp;</td>
</tr>
<tr class="tio">
<td style="background-color:blue">&nbsp;</td>
<td style="background-color:yellow">&nbsp;</td>
</tr>
</table>
</body>
</html>
<HTML>
<HEAD>
<STYLE TYPE=TEXT/CSS>
<!--
BODY {background-color:green;}
TABLE {margin-left:0%; margin-top:0%; width:75%;
border-collapse:collapse; border:1px solid black;}
.RAD1 {height:1px;}
.RAD2 {height:5px;}
.RAD3 {height:150px;}
TD {background-color:lightblue; border:1px solid black; color:blue;}
-->
</STYLE>
</HEAD>
<BODY>
<table>
<tr class=rad1>
<td>
</td>
</tr>
<tr class=rad2>
<td>
</td>
</tr>
<tr class=rad3>
<td>
Det är TR (raden) som har höjd, inte TD:n.
<BR>
TD:n har ju bara en bredd.
<BR>
Den övre raden (cellen) är här bara 1px hög.
<BR>
Nästa rad (cell) är 5px hög.
<BR>
Den nedre raden är 150px hög
<BR>
Alla TD är i detta fall 75% breda.
</td>
</tr>
</table>
</BODY>
</HTML>
Det är TR (raden) som har höjd, inte TD:n.
TD:n har ju bara en bredd.
Hmm...
Både <tr> och <td>/<th> har faktiskt höjdattribut om man skall vara riktigt noga ;)
CSS2-standard skrev:
The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's specified 'height' and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the computed row height is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height).
Jag flikar in en fråga här också om det går bra...
Jag har fått för mig att man ska lägga ett mellanslag " " i celler för att annars kan det strula i vissa webbläsare... det gällde nog speciellt om man hade en bakgrund i <td>:n. Stämmer detta eller är det bara trams?
Det stämmer.
Det strulade så i NN4 iallafall... - och beteendet att lägga dit en "för säkerhets skull" i tabellceller har glidit in så långt i ryggmärgen att jag numera rutinmässigt alltid kör med utan att fundera över varför...
Men det verkar ju inte behövas i FireFox iallafall ;)
Kanske det inte behövs alls längre förresten? Någon som har testat fenomenet nyligen i olika webbläsare ?
