Markus*: Eine Frage an die Frontend-Experten

Beitrag lesen

SELF-Forum

Eine Frage an die Frontend-Experten

Markus*
– Informationen zu den Bewertungsregeln

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>
Beitrag melden
–
Informationen zu den Bewertungsregeln