Gibt es ein Möglichkeit den Rahmen von der Tabelle in HTML oder CSS mit einer Farbe auszufüllen?

... komplette Frage anzeigen

3 Antworten

Ich schätze mal dein Problem liegt beim Border-Spacing? D.h., der Rahmen den du meinst ist nur ein Zwischenraum, kein richtiger Rahmen, deshalb die Missverständnisse.

An der Stelle kommt es aber darauf an, was du tatsächlich möchtest: Willst du, dass tatsächlich nur ein Rahmen verwendet wird, der Zwischenraum also verschwindet? Dann ist die border-collapse Eigenschaft das, was du möchtest:

table, td, th {
border: 1px solid black;
border-collapse: collapse;
}

Willst du allerdings den Zwischenraum behalten, dann gibst du der Tabelle einen Hintergrund und den einzelnen Zellen einen Hintergrund, der den Tabellenhintergrund überdeckt.

table { background-color: black; }
td, th { background-color: white; }

Als kleines Beispiel:

https://jsfiddle.net/8abv19am/

Antwort bewerten Vielen Dank für Deine Bewertung

Das geht am schnellsten, indem du die Hintergrundfarbe für die Tabelle UND für die Tabellenzellen festlegst.

Damit man die Räume dazwischen sieht, sollte die Anweisung border-collapse: separate; dazu geschrieben werden.
Falls das hier nicht klappt mit der Code-Ansicht (sojfzt!), hab das auch auf pastebin rein kopiert:
http://pastebin.com/tqbeKJ0k



das klappt natürlich NICHT :-(





#sepa {
border-collapse: separate;
margin-top: 2em;
padding:5px;
}
table,
th,
td {
border: 1px solid yellow;
}

table {background: yellow;} /*Hintergrundfarbe Tabelle*/
td {background: green;} /*Hintergrundfarbe Zelle*/








Feld 1
Feld 2
Feld 3


Feld 4
Feld 5
Feld 6








Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Suboptimierer
18.04.2016, 12:38

Darf ich das auch einmal versuchen?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>

<style>
#sepa {
border-collapse: separate;
margin-top: 2em;
padding:5px;
}
table,
th,
td {
border: 1px solid yellow;
}

table {background: yellow;} /*Hintergrundfarbe Tabelle*/
td {background: green;} /*Hintergrundfarbe Zelle*/

</style>
</head>
<body>


<table id="sepa">
<tbody>
<tr>
<td>Feld 1</td>
<td>Feld 2</td>
<td>Feld 3</td>
</tr>
<tr>
<td>Feld 4</td>
<td>Feld 5</td>
<td>Feld 6</td>
</tr>
</tbody>
</table>


</body>
</html>
1

Du gibst dem Rahmen doch die Dicke und die Farbe als Eigenschaften mit. Es sieht doch z.B. so aus: border: solid black 1px;
Solid heißt, dass es sich um eine durchgehende Linie handelt. black ist die Farbe, dort kannst du auch eine andere Farbe oder einen Hexadezimalwert einsetzen. 1px ist die Dicke des Rahmens, welche du auch in % oder em angeben kannst.

Antwort bewerten Vielen Dank für Deine Bewertung