7 svar · 541 visningar · startad av sadsmile
Finns det en minsta möjliga höjd som man kan ha på en cell? I TD-taggen alltså.
Testade och göra en tabell med 2 rader och 1 kolumm. Den ena raden var på 5 px och den andra på 10px men de bliv exakt lika stora i IE6.
Håller på med en layout som strular och jag misstänker att det är just höjden på cellerna som inte blir så som jag anger att de ska vara.
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>
(Bygger på koden i http://member.webforum.nu/2241/pyttetabell.html , fast i just det gamla exemplet är alla celler lika stora ;)
<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>
Bossse skrev:
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).
(min fetmarkering)
Källa: http://www.w3.org/TR/CSS2/tables.html#height-layout
Snygg lösning annars ;)
Fixat
jarvklo, du hade rätt där... hade en " " i cellen, tog jag bort den så fungerade allt som jag ville.
Tänk vad lite "luft" kan ställa till det......
;)
Tackar
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 ?
Någon som har testat fenomenet nyligen i olika webbläsare ?
IE visar fortfarande inte "tomma" tabeller. Opera har jag inte testat på.