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

CSS - Tabellenformat

C

ChangedUser677

Mitglied
Hallo,

habe wiedermal ein Problem, diesmal aber in CSS. Ich will mit <divs> sowas in der Art wie eine Tabelle machen(<table>). Funktioniert auch wunderbar. Bis auf, wenn das Text in der z.B. 4 Spalte zu groß ist, macht der die 1-3 Spalte nicht automatisch so hoch.

****Hier ist die Seite. Schaut Sie euch mal an, dann könnt ihr es besser verstehen.

Der Code:
PHP: 
          <div style="width: 100%; height: auto;"> 
           <div style="float: left; width: 24%; height: auto; padding-left: 5px; border-bottom: #808080 solid 1px; border-left: #808080 solid 1px;">'.$a[ssoyadi].'</div>
           <div style="float: left; width: 24%; height: auto; padding-left: 5px; border-bottom: #808080 solid 1px; border-left: #808080 solid 1px;">'.$a[aadi].'</div>
           <div style="float: left; width: 24%; height: auto; padding-left: 5px; border-bottom: #808080 solid 1px; border-left: #808080 solid 1px;">'.$a[baabaadi].'</div>
           <div style="float: left; width: 23%; height: auto; padding-left: 5px; border-bottom: #808080 solid 1px; border-right: #808080 solid 1px; border-left: #808080 solid 1px;">'.$a[eetelefon].'</div>
          </div>
          <br style="clear: both;">';
Mit <tables> will ich nicht arbeiten, besser gesagt darf ich nicht.
Also brauche ich eure Hilfe.

Yusuf
 
Zuletzt bearbeitet:
Werbung:
In diesem Fall handelt es sich um strukturierten Inhalt. Und dafür ist die Tabelle das richtige Instrument.
Nimm also dazu ruhig die Tabelle, denn für solche Zwecke ist sie da.
 
Werbung:
Du kannst jedem Div eine fixe Höhe zuweisen, die sich an der des höchsten Divs orientiert.
Aber nochmal: CSS zu verwenden heißt nicht, auf Tabellen gänzlich zu verzichten, sondern sie dort einzusetzen, wo es ihr Zweck erfordert. Und das ist hier der Fall.
 
Wenn tabellarische Daten darzustellen sind, dann nutze bitte auch eine Tabelle! Damit tust du nicht nur Dir einen Gefallen, sondern auch deinen Besuchern.

Wenn es denn aber wirklich sein muss, dann kann man Elemente auch als table, table-row und table-cell formatieren. Mit einem einfachen Trick funktioniert das auch für IE6/7:

HTML: 
<div class="table">
   <div class="row">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
   </div>
</div>
Das CSS für normale Browser:
Code: 
.table {
    display:table;
}
.row {
    display:table-row;
}
.cell {
    diplay:table-cell;
}
Und für IE 6/7:
Code: 
.table,
.row,
.cell {
     zoom:1;
     display:inline;
}
So verhalten sich die Div's dann wie eine richtige Tabelle.
 
Werbung:
prm schrieb:
Du kannst jedem Div eine fixe Höhe zuweisen, die sich an der des höchsten Divs orientiert.
Aber nochmal: CSS zu verwenden heißt nicht, auf Tabellen gänzlich zu verzichten, sondern sie dort einzusetzen, wo es ihr Zweck erfordert. Und das ist hier der Fall.
Zum Vergrößern anklicken....

Das hört sich gut an :)
Danke für alle euren Antworten.

Muss ich dann height: fixe; machen? Oder wie geht das? Beschäftige mich erst seit kurzem mit CSS. Sorry.
 
@Yusuf: Die Eigentschaft heigt kennt nur numerische Werte (in Prozent, oder absolut angegeben) oder "auto". Der Wert bezieht sich auf das nächste Elternelement, für das ebenfalls eine Höhe angegeben wurde. D.h. du müsstest deinem Umschließenden DIV eine feste Höhe zuweien.

prm schrieb:
... aber nur, wenn das alle Browser auch umsetzen. So z.B. nicht der IE 6.
Zum Vergrößern anklicken....

Ich habe geschrieben, dass der Workaround auch im IE 6 funktioniert. Das es so ist, davon kannst du Dich überzeugen, wenn du dem Link in meiner Signatur folgst, oder dieses Buch liest: Galileo Computing : Buch : Fortgeschrittene CSS-Techniken
;)
 
Zuletzt bearbeitet:
Werbung:
Aber ich bin noch nach wie vor von der Fragestellung fasziniert.

Wir sehen eine Tabelle wie sie im Buche steht und Yusuf muss daraus ein DIV Ungetüm mit, in meinen Augen zweifelhaften, CSS Angaben machen. Das ist doch so was wie, Folter für den Semantiker.
 
es kann nicht sein, dass man erst tabellen-layouter missionieren muss von tabellen weg zu kommen und nun genau das gegenteil getrieben wird.

tabellen sind GUT, wenn man tabellarische daten hat. SONST eher nicht
das div gewurschtel ist horrorpur!
 
Hallo,

habs jetzt mit Tabellen gemacht. Sieht gut aus. Funktioniert auch, aber leider macht der den Rand nicht? "bordercolor="#808080"" also.

PHP: 
<table width="100%" border="1" cellspacing="1" cellpadding="1" bordercolor="#808080">
          <tr style="color: #FFF" bgcolor="#F19C50">
       <td width="25%">Soyadi:</td>
           <td width="25%">Adi:</td>
           <td width="25%">Babaadi:</td>
           <td width="25%">Telefon:</td>
       </tr>

Ist der Code. Ist da irgendwo ein Fehler?
 
Werbung:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben