• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle: td mit fester Höhe in allen Browsern

M

mapblogger

Neues Mitglied
Hallo,

ich suche nach einer eleganten Lösung für ein kleines Tabellenproblem. Ich versuche in einer Tabelle den td's eine feste Höhe von 30 Pixeln zuzuweisen. Im Firefox wird es richtig angezeigt. Der IE zieht mir die Zeilen entsprechend der Größe des Bildes links in der Tabelle aber wieder auseinander. Kann mir da jemand weiterhelfen? Oder empfiehlt es sich das ganze mit Div Containern umzusetzen?

Grüße

mapblogger
 
Zuletzt bearbeitet:
Hallo,

ohne den endgültigen Text und gesamte Seite zu kennen ist es nicht möglich zu beurteilen, ob eine Tabelle dort sinnvoll ist oder nicht. Und warum sollen die die Zeilen 30px hoch sein?

So wie das zur Zeit ausschaut könntest du dort eventuell (kommt halt auf den Text an) auch zu einer Definitionsliste greifen.

Gruss

MrMurphy
 
Wundert mich, dass Firefox das angeblich "richtig" anzeigt.
Tabellen sind für diesen Zweck nicht gedacht.
Vielmehr sollen sie sich ihrem Inhalt jederzeit anpassen können!
Darum gibt es auch das css-attribut overflow für Tabellen nicht.
MrMurphys vorgeschlagene Defibitionsliste wäre, anhand des von dir gezeigt Beispieles beurteilt, die richtige Wahl
 
Hallo,

danke für die schnellen Antworten! Bei den Tabellen handelt es sich um ein Profil mit Bild und Kontaktdaten.
Ich möchte gerne, dass auf meiner Website alle Profile einheitlich sind, deswegen die feste Höhe der Tabellenzeilen.
Läßt sich das etwa auch mit Definitionslisten und CSS umsetzen?
 
Zuletzt bearbeitet:
Habe mich damit nochmal auseinander gesetzt.

Ist demnach diese Option mit der Definitionsliste besser?

Code: 
<html>
<head>

<style type="text/css">

  div.profilbild {
    float:left;
    padding-top:2px;
    padding-right:6px;
    background-color:#FFF;
  }

dl {
    margin-top:0;
    
}

dl dt{
    float:left;
    width:120px; 
    background-color:#CCC;
    background-color:#f6f6f6;
    padding-top:8px;
    padding-bottom:8px;
    border:2px solid #ffffff;
    border-right:4px solid #ffffff;

}

dl dd{

    background-color:#f6f6f6;
    padding-top:8px;
    padding-bottom:8px;
    border:2px solid #ffffff;

}

</style>

</head>

<body>
<div class="profilbild"><img src="http://www.google.de/logos/2010/googbday10-hp.jpg" /></div>
<dl>
    <dt>Ansprechpartner:</dt><dd>Max Mustermann</dd>
    <dt>Adresse:</dt><dd>...</dd>
    <dt>Telefon:</dt><dd>...</dd>
    <dt>Homepage:</dt><dd>...</dd>
</dl>
<br style="clear:both;" />

</body>
</html>
als bisher meine Lösung nur mit Div-Containern?

Code: 
<html>
<head>

<style type="text/css">

  div.profilbild {
    float:left;
    padding-top:2px;
    padding-right:6px;
    background-color:#FFF;
  }
  
  div.profilbox1 {
    float:left;
    width:120px;
    background-color:#f6f6f6;
    padding-top:8px;
    padding-bottom:8px;
    border:2px solid #ffffff;
    border-right:4px solid #ffffff;
  }

  div.profilbox2 {
    background-color:#f6f6f6;
    padding-top:8px;
    padding-bottom:8px;
    border:2px solid #ffffff;
  }

}

</style>

</head>

<body>

<div class="profilbild"><img src="http://www.google.de/logos/2010/googbday10-hp.jpg" /></div>
<div class="profilbox1">Ansprechpartner:</div><div class="profilbox2">Max Mustermann</div>
<div class="profilbox1">Adresse:</div><div class="profilbox2">...</div>
<div class="profilbox1">Telefon:</div><div class="profilbox2">...</div>
<div class="profilbox1">Homepage:</div><div class="profilbox2">...</div>
<br style="clear:both;" />

</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben