nicht angemeldet
Eine Frage an die Frontend-Experten
0 
Matthias Apsel
0 0 Matthias Apsel
0
0 0 
Gunnar Bittersmann
Eine Frage an die Frontend-Experten
Hallo zusammen, kann mir jemand von euch mal erläuern, warum die CSS Tabelle (Tabelle1 im Beispiel), sich einen Pixel breiter darstellt, als die HTML-Tabelle (Tabelle2 im Beispiel)? Das passiert in den meisten Browsern, mit Ausnahme von einigen Exoten. Da die "Großen" das alle einen Pixel breiter rendern, gehe ich mal davon aus, dass das richtig ist. Blöd halt bei 100% breite, dass da ein Scrollbar entsteht, den man ganze 1px schieben kann! ;)
Beste Grüße Markus*
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body, html {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header>
<!-- Tabelle1 CSS -->
<div style="border-collapse: collapse; display: table; width: 100%;">
<ul style="display: table-row;">
<li style="border: 1px solid #008000; display: table-cell; height: 30px; line-height: 30px; text-align: center; width: 25%;">
<a>A1</a>
</li>
<li style="border: 1px solid #008000; display: table-cell; height: 30px; line-height: 30px; text-align: center; width: 25%;">
<a>A2</a>
</li>
<li style="border: 1px solid #008000; display: table-cell; height: 30px; line-height: 30px; text-align: center; width: 25%;">
<a>A3</a>
</li>
<li style="border: 1px solid #008000; display: table-cell; height: 30px; line-height: 30px; text-align: center; width: 25%;">
<a>A4</a>
</li>
</ul>
</div>
<!-- Tabelle2 HTML -->
<table style="width: 100%; border-collapse:collapse;">
<tr>
<td style="width: 25%;border:1px solid black;height: 30px; line-height: 30px; text-align: center;">
<a>A1</a>
</td>
<td style="width: 25%;border:1px solid black;height: 30px; line-height: 30px; text-align: center;">
<a>A2</a>
</td>
<td style="width: 25%;border:1px solid black;height: 30px; line-height: 30px; text-align: center;">
<a>A3</a>
</td>
<td style="width: 25%;border:1px solid black;height: 30px; line-height: 30px; text-align: center;">
<a>A4</a>
</td>
</tr>
</table>
</header>
</body>
</html>
-
Hallo Markus*,
unabhängig von deiner Fragestellung: Verwende eine Tabelle, wenn tabellarische Daten vorliegen. Es ist nicht sinnvoll, eine Tabelle aus dafür nicht gedachten Elementen nachzubauen.
Der Grund für die unterschiedliche Darstellung dürfte in den collapsing borders zu suchen sein.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo Markus*,
Hallo Matthias,
unabhängig von deiner Fragestellung: Verwende eine Tabelle, wenn tabellarische Daten vorliegen. Es ist nicht sinnvoll, eine Tabelle aus dafür nicht gedachten Elementen nachzubauen.
Dessen bin ich mir bewusst, jedoch habe ich explizit um eine Begründung gebeten, die das Verhalten erklärt. Es wird im Collapsing liegen, allerdings weise ich m.E. den jeweiligen Elementen, die gleichen Eigenschaften zu, trotzdem ergibt sich ein Unterschied.
Es geht mir nich darum eine Tabelle zu benutzen, sondern das Verhalten zu verstehen.
Gruß Markus*
-
Hallo Markus*,
Es geht mir nich darum eine Tabelle zu benutzen, sondern das Verhalten zu verstehen.
Dann solltest du auch noch den letzten Satz meines Beitrages lesen.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig. -
Moin,
das liegt wohl am Box-Modell, also der unterschiedlichen Interpretation von Breite/Höhe (mit oder ohne Border, siehe auch "box-sizing").
hth bernd
-
-
-
Hallo,
kann mir jemand von euch mal erläuern, warum die CSS Tabelle (Tabelle1 im Beispiel), sich einen Pixel breiter darstellt, als die HTML-Tabelle (Tabelle2 im Beispiel)?
wenn ich auch das Inline-CSS ganz schlimm finde, füge deinem CSS Block ganz oben folgende Anweisung hinzu:
* { box-sizing:border-box; }Dann sollten alle Tabellen wieder gleich breit sein. Mehr Infos zum box-sizing:border-box
-
Hallo,
Moin!
* { box-sizing:border-box; }box-sizing:border-box und vielen Dank, das Hilft für das Verständnis!
-
@@Sara
wenn ich auch das Inline-CSS ganz schlimm finde, füge deinem CSS Block ganz oben folgende Anweisung hinzu:
* { box-sizing:border-box; }Scheint tatsächlich zu helfen. Interessant ist’s aber trotzdem, warum ohne diese Angabe (keine „Anweisung“) Browser Elemente, die mit CSS erst zu
table,table-row,table-celletc. gemacht wurden, anders rendern alstable-Elemente,tr-Elemente,td-Elemente etc.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
@@Markus*
<!DOCTYPE html> <html> […] </html>Fürs nächste Mal: Online-Beispiel, bitte.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.