Gewusst wie: anpassen von HTML-Tabellen-Zeile, um seinen Inhalt

Meine <table> hat drei Zeilen und Spalten, wobei die Letzte Zeile in der Tabelle wie diese:

<tr>
 <td colspan="3" align="center" valign="top" style="background-color: #eeeeee;">
  <hr class="vdivider">
  <div class="sitemap">There's an unordered list in here</div>
 </td>
</tr>

Nun ist die seltsame Sache, die ich nicht herausfinden können, ist, dass die <tr> ist fast doppelt so hoch wie sein Inhalt. Beide <hr> und <div> zusammen sitzen ganz schön ausgerichtet, die oben in der Tabelle, Zeile, und dann gibt es fast 150px leeren Raum an der Unterseite der Tabelle. Padding und margin und border für alle Elemente 0 sind, und es gibt nicht viel anderes styling, um die Tabelle oder die Zeilen - /Spalten andere als diese:

html, body, table {
  width: 100%;
  height: 100%;
}

Wie kann ich machen, dass die Zeile in der Tabelle passen sich der Höhe des Inhalts, und loszuwerden des großen Raumes an der Unterseite? Ich habe zugewiesen, die Höhe der Tabelle hier, um stellen Sie sicher, es erstreckt sich bis zum unteren Rand des Fensters, wenn das Fenster größer als der Tisch sein würde. Ich nehme an, das ist, wo die allzu große <tr> stammt. Zum Ausgleich für diese Strecke, ich habe versucht, fügen Sie die extra <tr> über die sitemap mit einem min-height:100px; max-height:none; aber das hat nicht geholfen.

BEARBEITEN Festen Tippfehler.

BEARBEITEN Vielleicht ein wenig mehr hintergrund zu dieser.

+--------------------------------+ browser-Fenster (html-Text) 
| +----------------------------+ | 
| | banner | | es ist ein banner-Bild hier, das sich in die Seite 
| +----------------------------+ | 
| | css menu bar | | ein standard-CSS-Menü gebaut, von ul 
| +----------------------------+ | dies ist, wo die Tabelle beginnt, es hat drei Spalten 
| | td | td td | td | | 
| | | | | | 
| +----------------------------+ | 
| | tr colspan=3 um Platz | | es Spalte, um Platz zu schaffen zwischen Inhalten oben und die sitemap unten 
| +----------------------------+ | 
| | tr colspan=3 für sitemap | | tr von oben, die sitemap, die sich Weg nach unten, wenn table { height: 100%; } 
| +----------------------------+ | 
| | das ist der Raum im großen Fenster, wenn die Tabelle keine Höhe einstellen. 
+--------------------------------+

Eine live-Verbindung oder jsfiddle des Codes wird uns helfen.
Link oder Geige bitte.
Haben u zurücksetzen des UL-Tags auch? verwenden padding und margin 0px
There's a <ul> here nicht There's a <ul> here.
Ja. @Mr_Green: Was ich sagen wollte ist, dass innerhalb der <div> es wird eine ungeordnete Liste.

InformationsquelleAutor Jens | 2013-06-27

css html

9

Danke für das feedback! Entfernen der table { height: 100%; } hat nicht funktioniert, weil es nicht zu dehnen die Tabelle an den unteren Rand der Seite. Diese Dehnung ist das, was ich wollte, aber ich denke, das ist auch, was die Ursache der übermäßig aufgeblasenen <tr> die sich diese Frage bezieht.

Die Lösung für das war eher ein Unfall:
```
<tr style="height: 0;">
  ...
</tr>
```
Mit dabei, die Zeile schrumpft auf die Größe seines Inhalts, während die Tabelle noch erstreckt sich bis zum unteren Rand der Seite. Nicht sicher, ob dies eine "gesunde" Lösung, aber sicher funktioniert.
- Vor kurzem hatte ich das gleiche problem, aber ich konnte es nicht funktionieren, bis ich die Höhe auf 1px.
- Tatsächlich (getestet auf Chrome 51.0.2704.103) für mich mindestens eine Zeile hatte, haben height: 1 um zu arbeiten. Ich fügte hinzu, eine leere Zeile, um mein tab mit der Höhe um 1 und es hat funktioniert.
- 0 scheint zu funktionieren, in Chrome, aber nicht FF. 1px oder 1% scheint zu funktionieren in beiden Browsern.
InformationsquelleAutor Jens
2

entfernen Höhe
```
html, body, table {
  width: 100%;
}
```
und es sieht aus wie diese (nicht mehr Aufwand in <tr> height)

Warum die 100% Höhe auf html und body überhaupt? Außerdem würde ich ändern There's a <ul> here zu There's a <ul> here
- Entfernen Sie die height:100% hat den trick, so scheint es. Ich denke, diese Einstellung ist ein Relikt aus den alten code habe ich nie wirklich wieder aufgegriffen—es ist nicht notwendig? Nein, das ist es nicht. Wenn ich entfernen Sie die height dann die Letzte Zeile in der Tabelle sitzt nicht am unteren Rand des browser-Fensters das Fenster ist größer als die Tabelle. Es scheint, ich könnte brauchen ein anderes "Gummi <tr>", die ermöglicht, sich zu dehnen...
InformationsquelleAutor davidkonrad
0

Einmal, dass Sie das tags und schließen Sie Sie richtig Sie werden sehen, dass die TR Höhe ist, dass groß, weil UL Margen sind Dehnung es, wenn Sie ändern Sie den CSS-Code für dieses tag wird es kleinere überprüfen Sie es hier
```
ul {
    margin: 0;
    padding: 0;
}
```
Anderen Seite wie deine Tabelle hat nur 1 Zeile, wenn Sie hinzufügen den Stil height: 100% zu der Tabelle, die Zeile wird gestreckt, um die maximale, die Sie ändern können den Stil, um es so belassen überprüfen Sie es
```
table {
    width: 100%;
}
```
- Entfernen der height:100% nicht lösen das problem der tr passend zu Ihrem Inhalt, aber dann das Ende der Tabelle wird nicht ausgerichtet und gestreckt, um die Unterseite des Körpers mehr...
InformationsquelleAutor maqjav

http://jsfiddle.net/9jMR8/
Vielleicht so? Verändert die bg-Farbe des div..

Verändert das css wie dieses:

html, body{
width: 100%;
height: 100%;
}
table{
border:1px solid black;     
width:100%;
}
div{
background-color:blue;
}

InformationsquelleAutor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.