| Autor |
Nachricht |
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 08.02.2005 12:33
Titel tabelle in divs |
  |
|
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!
|
|
| |
  |
 |
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 08.02.2005 12:46
Titel
|
|
|
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?
|
|
| |
|
|
|
Anzeige
|
|
|
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 08.02.2005 12:52
Titel
|
|
|
befehl von oben.. 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>
|
|
| |
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 08.02.2005 13:01
Titel
|
|
|
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...
|
|
| |
|
|
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 08.02.2005 13:16
Titel
|
|
|
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..
|
|
| |
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 08.02.2005 13:22
Titel
|
|
|
|
ja. auch mit inline-block; würds gehen. unterstützen nur die wenigsten browser
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Di 08.02.2005 15:25
Titel
|
|
|
| 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 15:30, insgesamt 2-mal bearbeitet
|
|
| |
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
tabelle und divs die zweite..
Tabelle durch DIVs ersetzen - wie?
Höhe aus Tabelle auslesen und in andere Tabelle einfügen
Tabelle in Tabelle ist 1 px größer O_o
3 divs nebeneinander
Website mit divs und css
|
|
Willkommen auf dem Portal für Mediengestalter
wär super geil. aber:
