5 svar · 622 visningar · startad av inspiro
Borde vara enkelt att lösa men jag får inte till det. Lite förenklat så har jag en tabell i en tabell enligt följande:
[B]<table 1>[/B]
<tr>
<td>
[B]<table 2 height="100%">[/B]
<tr>
<td
</td>
</tr>
<table>
</td>
<td>
[B]<table 3 height="100%">[/B]
<tr>
<td>
</td>
</tr>
<table>
</td>
</tr>
</table>
Tabell 2 och tabell 3 kan vara olika höga och om tabell 2 är högst vill jag sträcka ut tabell 3 lika högt och tvärtom. Men det fungerar inte! Försöker sätta höjden på alla möjliga sätt men får aldrig till det. hur gör man?
Ett tydligare exempel kanske... ta den här koden. Hur gör jag så att den nästlade tabellen får 100% höjd???
<table width="300px" border="1">
<tr>
<td height="100%">
<table border="1" height="100%">
<tr>
<td height="100%">sdfsdfsdf</td>
</tr>
</table>
</td>
<td>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</td>
</tr>
</table>
"height" är inte ett godkänt attribut för tabeller: http://www.w3schools.com/tags/tag_table.asp
Jag tror aldrig det har varit det heller även om en del webbläsare godtagit det.
Höjd är väl egentigen aldrig ett godkänt eller bra attribut för annat än absolut positionerade divvar.
Så, dina försök med 100% höjd kommer alltså aldrig att funka i alla webbläsare. Tyvärr.
EDIT: Förlåt. Jag skulle naturligtvis ha frågat: Vad är det du vill åstadkomma? Kan du beskriva va det är du vill ha gjort, så kan man ju kanske komma med bättre (?) alternativ.....
Danne V skrev:
Höjd är väl egentigen aldrig ett godkänt eller bra attribut för annat än absolut positionerade divvar.
Vad menar du här? HTML-attributet height="" är inte ett giltigt attribut för DIV. CSS-egenskapen 'height' är giltigt att använda för alla element men gäller inte för icke-ersatta inline-element, tabellkolumner eller kolumngrupper.
Grundorsaken til problemet tror jag är att du använder en doctype som sätter IE i standards-mode, vilket kräver att man även sätter höjden till 100% på html och body.
inspiro skrev:
Tabell 2 och tabell 3 kan vara olika höga och om tabell 2 är högst vill jag sträcka ut tabell 3 lika högt och tvärtom. Men det fungerar inte! Försöker sätta höjden på alla möjliga sätt men får aldrig till det. hur gör man?
Visst har det med <!DOCTYPE att göra.
Tag bort den eller ersätt den med en som ger dig "Quirks mode" så funkar ditt exempel efter en "height-tvättning" ;)
Vill du inte gå tillbaka till Quirks (vilket ju egentligen inte är att rekommendera av olika skäl) så stupar du på att MSIE6 och tidigare tydligen inte klarar av att fördela höjden 100% om man inte trixar lite...
Av någon anledning funkar det om du sätter 100% höjd på tabellcellerna och dessutom kastar in en 100% hög div runt de "inre" tabellerna enligt det här (faktiskt validerande och helt kompletta !) HTML4-exemplet:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>Ett av Jarvklos exempel</title>
<style type="text/css">
html,body {height: 100%;margin:0;padding:0;}
</style>
<table id="nummer1" style="height: 100%" border="1">
<tr>
<td style="height: 100%">
<div style="height: 100%">
<table id="nummer2" style="height:100%" border="1">
<tr>
<td>Stooor cell</td>
</tr>
</table>
</div>
</td>
<td style="height: 100%">
<div style="height: 100%">
<table id="nummer3" style="height:100%" border="1">
<tr>
<td>lika stoor cell fast med fler ord</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Fast om det "fulhacket" funkar i leveransversionen av MSIE7 har jag inte hunnit testa än... :bire
Tabeller för layout kan vara knepiga.
Handlar det egentligen om att tabellerna skall fungera som "spalter" som skall vara lika höga men med olika bakgrundsfärger, så funkar det faktiskt att göra såhär iställlet
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>Ett av Jarvklos exempel</title>
<style type="text/css">
html,body {height: 100%;margin:0;padding:0;}
tr {vertical-align: top}
</style>
<table id="nummer1" border="1">
<tr>
<td style="background-color: maroon; color: white">
<table id="nummer2" border="1">
<tr>
<td>Stooor cell</td>
</tr>
</table>
</td>
<td style="background-color: navy; color: white">
<table id="nummer3" border="1">
<tr>
<td>lika<br>stoor<br>cell<br>fast<br>med<br>fler<br>ord</td>
</tr>
</table>
</td>
</tr>
</table>
... och om det inte är det du är ute efter hoppas jag du ursäktar utvikningen ;)
... och att ni andra ursäktar användandet av HTML4 (jag vet inte vad som flög i mig - men det är en helt annan historia det :birp )