mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 03.12.2016 10:40 Benutzername: Passwort: Auto-Login

Thema: tabelle in divs vom 08.02.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> tabelle in divs
Seite: 1, 2  Weiter
Autor Nachricht
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 08.02.2005 11:33
Titel

tabelle in divs

Antworten mit Zitat Zum Seitenanfang

Hi wahrscheinlich schon tausendmal diskutiert..hab aber keinen passenden thread gefunden, sorry.
Hab folgendes Problem: ganz normale 6 spaltige tabelle mit divs erstellen...darf allerdings kein float
und keine spans enthalten, die "Zellen" sollen eine feste breitenangabe haben und die tabelle
soll im ie und im firefox funktionieren.
Hier mal der Code:
<html>
<head>
<title>Table</title>
<style type="text/css">
<!--
body{
font-family: Arial, Verdana;
font-size: 10pt;
}

.table{
width: 300px;
text-align: left;
border-top: 1px solid gray;
border-right: 1px solid gray;
}

.row{
width: 100%;
overflow-y: hidden;
white-space: nowrap;
border-bottom: 1px solid gray;
}

.cell{
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border-left: 1px solid gray;
padding: 1px;
display: -moz-inline-box;
display: inline;
}

.cellheading{
width: 50px;
overflow: hidden;
border-left: 1px solid gray;
padding: 1px;
background-color: red;
display: -moz-inline-box;
display: inline;
}
-->
</style>
</head>
<body>
<div class="table">
<div class="row" style="background-color: red;">
<div class="cellheading">222</div>
<div class="cellheading">1</div>
<div class="cellheading">1</div>
<div class="cellheading">1</div>
<div class="cellheading">1</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
</div>
</div>
<!--Problem-Wenn beide display Angaben vorkommen, werden sie vom IE ignoriert, Layout zerfällt-->
</body>
</html>

Habe mit display:inline experimentiert-Resultat, IE zeigt die korrekte Breite der Zellen an, Firefox nicht..
Vielleicht habt ihr ne Idee, einen link etc. Vielen Dank!
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 08.02.2005 11:46
Titel

Antworten mit Zitat Zum Seitenanfang

warum willst du eine tabelle mit divs darstellen und nimmst nicht einfach ne tabelle selbst dafür?

weil ohne float seh ich da schwarz das das funktioniert. wieso darf denn kein float benutzt werden?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 08.02.2005 11:52
Titel

Antworten mit Zitat Zum Seitenanfang

befehl von oben..*zwinker* chef hat mal irgendwo gesehen dass das auch ohne float funktioniert und ich darfs jetzt ausbaden..
aber danke dass nochjemand so denkt.weil in diesem fall wären tabellen ja "erlaubt". muss
es aber trotzdem machen.
hab jetzt noch ein bissl rumgetüftelt,
bis auf die frage warum der firefox in der letzten spalte die breitenangabe der zelle ignoriert
geht es auch ohne float. Hier das ergebnis:
<html>
<head>
<title>Table</title>
<style type="text/css">
<!--
body{
font-family: Arial, Verdana;
font-size: 10pt;
}

.table{
width: 250px;
text-align: left;
border-top: 1px solid gray;
border-right: 1px solid gray;
}

.row{
width: 250px;
overflow-y: hidden;
white-space: nowrap;
border-bottom: 1px solid gray;
}

.cell{
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
border-left: 1px solid gray;
padding: 1px;
display: inline;
padding: 0px 5px;
}

.cell{
display: -moz-inline-box;
}

.cellheading{
display: inline;
overflow: hidden;
text-overflow: ellipsis;
border-left: 1px solid gray;
width: 50px;
padding: 0px 5px;
background-color: red;
}

.cellheading{
display: -moz-inline-box;
}

-->
</style>
</head>
<body>
<div class="table">
<div class="row" style="background-color: red;">
<div class="cellheading">222</div>
<div class="cellheading">ddddddddddddddd</div>
<div class="cellheading">1</div>
<div class="cellheading">1</div>
<div class="cellheading">1</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">ddddddddddd</div>
<div class="cell">1</div>
<div class="cell">1</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
</div>
</div>
<!--Problem-Wenn beide display Angaben vorkommen, werden sie vom IE ignoriert, Layout zerfällt-->
</body>
</html>
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 08.02.2005 12:01
Titel

Antworten mit Zitat Zum Seitenanfang

klar geht das auch ohne float. mit display: inline;

das problem dabei ist, du kannst höhen und breitenangaben nur auf blockelemente anwenden. bei inline-elementen passt sich die breite und höhe dem inhalt an. wenn du dem div also n display: inline; gibst, muss sich dein chef von der idee verabschieden den divs ne feste breite zu geben.

also entweder machstes mit float: left; und breitenangaben, oder mit display: inline; und ohne breitenangaben. aber beides geht nicht. hat sich dein chef wohl verguckt. wobei ich nich verstehe wieso man kein float benutzen darf, bzw wieso man nicht einfach ne tabelle nehmen soll um eine tabelle darzustellen...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Di 08.02.2005 12:16
Titel

Antworten mit Zitat Zum Seitenanfang

ich verstehs auch nicht...aber er hat sich's nunmal in den kopf gesetzt..
die feste breitenangabe bei display:inline funktioniert schon, wenn man
für den explorer display: inline angibt und unter die klasse nochmal
für den firefox display: -moz-inline-box schreibt, da der ie den befehl
ignoriert..bis auf die anzeige der letzten spalte dort wird die breitenangabe
ignoriert..es is zum mäusemelken..
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 08.02.2005 12:22
Titel

Antworten mit Zitat Zum Seitenanfang

ja. auch mit inline-block; würds gehen. unterstützen nur die wenigsten browser
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Di 08.02.2005 14:25
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<html>
<head>
<title>Table</title>
<style type="text/css">
<!--
body{
font-family: Arial, Verdana;
font-size: 10pt;
}

.table {
   display: table;
   width: 249px;
   text-align: left;
   border: 1px solid gray;
   }

.row {
   display: table-row;
   width: 250px;
   }

.cell {
   display: table-cell;
   width: 49px;
   border-bottom: 1px solid grey;
   border-left: 1px solid gray;
   padding: 1px;
   padding: 0px 5px;
   }

.unten {
   border-bottom: none;
}
.left {
   border-left: none;
}
-->
</style>
</head>
<body>
<div class="table">
   <div class="row" style="background-color: red;">
      <div class="cell left">heading 1</div>
      <div class="cell">heading 2</div>
      <div class="cell">heading 3</div>
      <div class="cell">heading 4</div>
      <div class="cell">heading 5</div>
   </div>
   <div class="row">
      <div class="cell left">row1 1</div>
      <div class="cell">row1 2</div>
      <div class="cell">row1 3</div>
      <div class="cell">row1 4</div>
      <div class="cell">row1 5</div>
   </div>
   <div class="row">
      <div class="cell unten left">row2 1</div>
      <div class="cell unten">row2 2</div>
      <div class="cell unten">row2 3</div>
      <div class="cell unten">row2 4</div>
      <div class="cell unten">row2 5</div>
   </div>
</div>
<!--Problem-Wenn beide display Angaben vorkommen, werden sie vom IE ignoriert, Layout zerfällt-->
</body>
</html>


/* edit: ok.. funzt nur im mozilla.. aber kannst ja mal mit experimentieren */


Zuletzt bearbeitet von sahnemuh am Di 08.02.2005 14:30, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Di 08.02.2005 14:27
Titel

Antworten mit Zitat Zum Seitenanfang

* Applaus, Applaus * wär super geil. aber:

http://css4you.de/display.html

display: table; + IE = *balla balla*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Tabelle durch DIVs ersetzen - wie?
tabelle und divs die zweite..
Höhe aus Tabelle auslesen und in andere Tabelle einfügen
Tabelle in Tabelle ist 1 px größer O_o
höhenangaben von divs
Tabellenaufbau mit divs
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.