Problem mit display:table-cell in Safari... ungewollte Abstände erscheinen zwischen und unter den Zellen bearbeitet von awa 11.02.2018 07:06 Hallo zusammen, mit Freude habe ich kürzlich den Aufbau einer Seite von Tabellen auf Divs umgestellt und dabei auf display:table/table-row/table-cell zurückgegriffen. Das funktioniert insgesamt sehr fein, auch die Zellenhöhen und - breiten in Abhängigkeit der Bildschirmgröße etc.. Ein Problem bleibt, wie folgt: Öffne ich einen solchen Aufbau wie im angegebenen Beispiel auf [http://www.andreaswalther.de/div_tablecell_problem.html](http://www.andreaswalther.de/div_tablecell_problem.html) in Firefox, dann passt alles prima, die 'div-cells' hängen nahntlos aneinander; wechsle ich auf Safari, ergeben sich zwischen zwischen und unter ihnen Abstände, die ungewünscht sind und die ich nicht in den Griff bekomme. Hat jemand eine Idee und kann weiterhelfen? Ich freue mich über jeden Rat! Der entsprechende sourcecode gleich anschließend. Danke und viele Grüße, awa ~~~HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> body { background-color: #222222; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } div.table { display: table; border-collapse:collapse; } div.tr { display:table-row; vertical-align:middle; } div:tr_scr { display:table-row; overflow-x:hidden; vertical-align:middle; } div.td { display:table-cell; border:none; padding:0px; overflow: scroll; vertical-align:middle; } </style> </head> <body> <div style="width:100vw; min-height:30vw; max-height:30vw; border:none;"> </div> <div style="width:100vw; overflow-x:hidden; overflow-y:hidden; border:none; background-color:#eeeeee;"> <div class="td"> <img src="Bilder/hellgrau.jpg" style="max-width:20vw; min-width:20vw;" height="10px"> </div> <div class="td"valign="top" align="center"> <img src="Bilder/dunkelgrau.jpg" name="Arbeit31" style="max-width:60vw; min-width:60vw;" height="10px"> </div> <div class="td"> <img src="Bilder/hellgrau.jpg" style="max-width:20vw; min-width:20vw;" height="10px"> </div> </div> </body> </html> ~~~
Problem mit display:table-cell in Safari... ungewollte Abstände erscheinen zwischen und unter den Zellen bearbeitet von Matthias Apsel 11.02.2018 07:42 Hallo zusammen, mit Freude habe ich kürzlich den Aufbau einer Seite von Tabellen auf Divs umgestellt und dabei auf display:table/table-row/table-cell zurückgegriffen. Das funktioniert insgesamt sehr fein, auch die Zellenhöhen und - breiten in Abhängigkeit der Bildschirmgröße etc.. Ein Problem bleibt, wie folgt: Öffne ich einen solchen Aufbau wie im angegebenen Beispiel auf [http://www.andreaswalther.de/div_tablecell_problem.html](http://www.andreaswalther.de/div_tablecell_problem.html) in Firefox, dann passt alles prima, die 'div-cells' hängen nahntlos aneinander; wechsle ich auf Safari, ergeben sich zwischen zwischen und unter ihnen Abstände, die ungewünscht sind und die ich nicht in den Griff bekomme. Hat jemand eine Idee und kann weiterhelfen? Ich freue mich über jeden Rat! Der entsprechende sourcecode gleich anschließend. Danke und viele Grüße, awa <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> body { background-color: #222222; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } div.table { display: table; border-collapse:collapse; } div.tr { display:table-row; vertical-align:middle; } div:tr_scr { display:table-row; overflow-x:hidden; vertical-align:middle; } div.td { display:table-cell; border:none; padding:0px; overflow: scroll; vertical-align:middle; } </style> </head> <body> <div style="width:100vw; min-height:30vw; max-height:30vw; border:none;"> </div> <div style="width:100vw; overflow-x:hidden; overflow-y:hidden; border:none; background-color:#eeeeee;"> <div class="td"> <img src="Bilder/hellgrau.jpg" style="max-width:20vw; min-width:20vw;" height="10px"> </div> <div class="td"valign="top" align="center"> <img src="Bilder/dunkelgrau.jpg" name="Arbeit31" style="max-width:60vw; min-width:60vw;" height="10px"> </div> <div class="td"> <img src="Bilder/hellgrau.jpg" style="max-width:20vw; min-width:20vw;" height="10px"> </div> </div> </body> </html>
nicht angemeldet
