HTML & CSSur HTML, XHTML & CSS
12 svar · 266 visningar · startad av Jacob
Koiera följande kod och lägg i ett html dokument
<table width="90%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="121" align="center">Ruta 1:1</td>
<td>Ruta 1:2</td>
<td>Ruta 1:3</td>
</tr>
<tr valign="top">
<td width="121">Ruta 2:1</td>
<td colspan="2">Ruta 2:2-3</td>
</tr>
<tr>
<td colspan="3" align="center">
<table width="98%" border="1" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="105">Ruta 3:1</td>
<td>Ruta 3:2 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">Ruta 4:1-3</td>
</tr>
</table>
Öppna sedan sidan i Internet Explorer. Sidab ser helt ok ut men testa nu att skriva en massa text i "Ruta 3:2". Kolla sedan i browsen. kanten mellan ruta 1:1 och ruta 1:2 har hoppat ut.
VARFÖR??!!??
Om du sedan lägger lite extra text i "Ruta 1:1" så serd u att cellen inte blir större ärn 121px men kanten ligger långt därifrån.
jag fattar ingenting?!?
Jag har gjort lite mer tester och även om man förenklar tabellern så blir det samma problem, så här t ex:
<table width="90%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="121" align="center">Ruta 1:1</td>
<td>Ruta 1:2</td>
<td>Ruta 1:3</td>
</tr>
<tr>
<td colspan="3">Ruta 2:1-3</td>
</tr>
</table>
Om man skriver för mycket text i "Ruta 2:1-3" så hoppar kanten ut
I NS6.2 funkar det som du vill. Men för att det skall funka i IE ta bort width för td Ruta 1:1 och Ruta 2:1 och sätt istället width i Ruta 2:2-3. Varför vet jag inte.
Då blir det inte som jag vill ha det. Den första kolumnen måste vara 121 bred
Då vet jag inte (för tillfället).
Sorry batterierna i tangenbordet tog slut, det är fixat nu.
det måte ju finnas en lösning på det här.
Om du använder fasta värden i hela tabellen så klarar du dig, om en tabell-cell behöver ligga med fast storlek - varför inte låt övriga göra det också.
jag vet ju inte vilken upplösning människor kör med så då biler det att man inte utnytjar hela skärmen
Varför måste en cell vara 121 pixlar?
De är till ett forum och i den cellen lite lite knappar och de tar upp 120px.
Jag har suttit och försökt lite till nu, men inget fungerar. Det måste ju gå.
Är det verkligen ingen som kan detta?
Visst kan vi - men problemet är precis som har sagts att du vill använda en relativ storlek på en tabell (90%), och en fast storlek på en cell (121). Detta krockar.
Enklaste sättet att lösa det på är att lägga en ny tabell inuti den första tabell-raden:
<table width="90%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="121" style="background:red">Ruta 1:1</td>
<td style="background:yellow">Ruta 1:2</td>
<td style="background:aqua">Ruta 1:3</td>
</tr>
</table></td>
</tr>
<tr>
<td><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. </p></td>
</tr>
</table>