html Tabelle füllt keine 100% Kapselung td Zelle
Ich habe eine Tabelle verschachtelt wie:
<table>
<tr>
<td>
<table>...
</table>
</td>
</tr>
</table>
Genauer:
einige style-info:
div.centered{
text-align: center;
height:100%;
}
div.centered table.centeredT {
margin: 0 auto;
text-align: left;
max-width: 781px;
overflow: hidden;
height:100%;
}
Layout:
<table style="height:100%; min-height:100%;" class="centeredT" border="1" cellpadding="0" cellspacing="0" width="781px" >
<tr>
<td style="vertical-align:top; padding-bottom:7px;padding-right:5px;width:33%;height:100%;">
<table style="table-layout:fixed;height:100%;min-height:100%;border:solid 1px black;" border="0" id="Table1" cellspacing="0" cellpadding="0" class="verdanaSmall" width="257px" >
<!--this first row is simply a spacer row because I am using table-layout:fixed attribute -->
<tr>
<td width="80px"></td>
<td width="175px"></td>
</tr>
<tr >
<td colspan="2" style="height:100%;">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-top: solid 1px black; border-bottom: solid 1px black;">
<tr>
<td style="text-align: left; vertical-align: middle;"> 1.) </td>
<td align="center" height="20">
<a href="results.asp?pubid=31422&date=10%2F11%2F2010&ttype=eqq"target="_top">
<font face="Verdana" size="2" color="#22476C"><b> Abilene Reporter News </b></font>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><font face="Verdana" size="1" color="#22476C"> Monday, October 11, 2010 </font></td>
</tr>
<tr>
<td align="center" colspan="2" height="100%" id="imagetd">
<a href="../PDFView/PDFView.aspx?pgID=32065209&adID=96332396&ref=50" target="_blank">
<img src="/pages/201010/11/31422/thumbs/A000300001H.gif" style="border: solid 1px black;" alt="" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Der Grund dafür ist, dass die Seite gefüllt ist dynamisch und die innere Tabelle ist eingefügt in ein data loop. Sowieso, die Frage ist, dass die innere Tabelle ist nicht Füllung 100% der verfügbaren Höhe der Kapselung td-Zelle. Ich habe die innere Tabelle Höhe, über css zu 100%, die Kapselung Tisch, und auch das body-tag und so weiter bis die Kette. Wenn man sich die Seite in firefox und opera, es sieht perfekt, aber IE scheint nicht zu gehorchen, die Höhe Besonderheiten und nur die Tabelle groß genug, um die Daten anzuzeigen, weiß jemand, der einen hack/fix für den IE, oder eine Möglichkeit, kann ich dies korrigieren..?
muek, das hilft nicht.
Pekka, die Seite ist 1300 Zeilen lang (ohne die externe Importe), so ist es ein wenig schwierig. Die Tabelle Stil Höhe auf 100% gesetzt, seine Kapselung Tabelle auf 100% Höhe, Körper-Stil ist zu 100% auf der Höhe... Es gibt keine Konflikte mit anderen styles, gibt es nichts, die Einstellung der Höhe der Tabelle irgendwo, aber es paßt nicht auf die Höhe der Kapselung td-Zelle.
Nur nach einem kleinen Beispiel-code. Zum Beispiel, eine Tabelle, eine Zeile, eine Zelle, eine verschachtelte Tabelle, und so weiter. Auch die CSS wäre sinnvoll. Wenn Sie können, weisen Sie uns bitte auf eine URL, um einen Blick auf die Seite.
Hoffe, das hilft. Die Website ist sicher, so kann ich nicht geben Sie die url, sorry.
InformationsquelleAutor flavour404 | 2010-10-11
Du musst angemeldet sein, um einen Kommentar abzugeben.
Als das problem beschreibt: das td-element selbst hat automatisch die Strecken bis zu 100%, aber (in IE) für einige Grund seiner Höhe nicht an Ihre Kinder als 100%.
Die Lösung ist ganz einfach: fügen Sie einfach 'height: 100%' auf das td-element das übergeordnete Element der verschachtelten Tabelle. Auf diese Weise 100% Höhe verabschiedet werden, um den td ' s, wenn Kinder mit height: 100%; auf Ihnen.
Es behebt das problem im IE und scheint nicht die Ursache jeglicher Probleme in anderen Browsern (getestet auf neue Browser Chrome, Firefox und IE).
HINWEIS: die Einstellung des td ' s Höhe bis zu 100% mit einer verschachtelten Tabelle möglicherweise die Zelle zu erweitern, zu viel. In führen, dass die Höhe kann justiert werden müssen, zum Ausgleich der Höhe der anderen Zeilen. Mit CSS3 kann dies einfach erreicht mit calc(100% - [Höhe der anderen Zeilen])
PS: ich bin mir bewusst, dass die obige Frage ist wirklich alt, aber ich stolperte über dieses, während googeln für einem ähnlichem problem und es scheint keine (richtige) Antwort zur Verfügung gestellt worden. Für die anderen, die diese Seite finden, genau wie ich, es könnte hilfreich sein, zu finden, ein
Antwort.
InformationsquelleAutor Kevin Driessen
Versuchen padding:0px; auf cointaner und innere Tabelle.
InformationsquelleAutor Retired_User
Ok, ich habe nicht alles getestet, aber es sieht nicht wie Sie gesetzt haben, die innere Tabelle die Höhe 100%. Sie haben eine Klasse
table.centeredT
aber Sie nicht angegeben haben, die Klasse auf dem Tisch. Noch haben Sie angegebenheight: 100%
auf die innere Tabelle sich. Gib mir ein paar Minuten mehr und ich werde versuchen, dies zu erreichen auf jsfiddle.Edit: Eine Sache, die haben nur auftreten, zu mir - welche Gewohnheit werden, wodurch das problem aber nur verringert den code ein wenig - ist, dass Sie mit der
col
- Attribut statt eine zusätzliche Zeile an der Spitze. Ich habe gehört, dass dieses nicht 100% unterstützt, aber ich hatte noch nie ein problem mit ihm persönlich.Edit: Ok ich hab keine Ahnung... war das Alter für dies und das nicht immer überall. Ich persönlich havent verwendet Tabellen, die in Monate - ich bin gut genug in divs, float und clear und dergleichen, ich kann einfach machen, was aussieht wie eine Tabelle, ohne eine Tabelle. Wenn ich mir die Anzeige von Daten in einer sinnvollen Art und Weise, dann würde ich eine Tabelle verwenden. Ist dieser für die Anzeige von Daten, oder kann es sein, angezeigt nur mit divs /float /clear?
Haben Sie große Fortschritte gemacht? Im rund um die Uhr ein film ist, dann werde ich wieder in der Arbeit-Modus... die werden dir dann helfen wenn Sie noch fest sind.
ClarkeyBoy, ich habe versucht zu tun, die gleiche Sache mit divs und bin immer noch nicht richtig... <a href="herestackoverflow.com/questions/3919888/...>
InformationsquelleAutor ClarkeyBoy
Müssen Sie haben Feste Höhen der Elemente aufgespannt werden, auf 100% Höhe. Feste Höhen bedeutet, dass Sie haben, um Sie in pixel Höhe statt der Anteil. Sehen dies SO Frage und die Lösung mit ähnlichem code:
Iframe { height:70%;} funktioniert nicht im IE 8 und Firefox
InformationsquelleAutor jor