CSS in einer Tabellenzelle

paUw · 14. September 2016

Guten Tag,

mein erster Beitrag, ich hoffe es ist machbar.

Ich bekomme ein vorgefertigtes Layout das ich nutze, eigentlich ist es ok, nur eine Tabellenzelle würde ich gerne anders formatieren als vorgegeben.

Vorgegeben ist.

Code

.cssMainTab
{
	width:98%;
	font-family : Arial;
	background-color : FFFFFF;
	border-collapse : collapse;
	font-size:12px;
 
}




table.cssMainTab td
{	border-style : solid;
	border-color : #7382A0;
	border-width : 1px;
}

Alles anzeigen

Die Zelle um die es geht hat dieses CSS zugewiesen bekommen

Code

.cssAussen
{
color:#ffffff;
background-color:#003366;
text-align:left;
vertical-align:middle;
padding:3px 0 2px 3px;
}

wie kann ich dieses Zelle eine border-top: 1px solid #fff; zuweisen? Einfach die Zeile zuschreiben klappt nicht

Ich habe keine wirkliche Ahnung von CSS und brauche es auch nicht wieder. Mit Style in der Zelle kann ich nicht arbeiten, weil die Zellen generiert werden und ich keinen Einfluss habe.

Beste Grüße und danke
Uwe

rantanplan2000 · 14. September 2016

Wenn du kein CSS brauchst, hast du aber eine sehr nüchterne Seite. CSS ist das Leben und die Farbe einer HTML Seite.
Tabellen sind eigentlich Oldshool und zu vermeiden, aber du kannst dem jeweiligen Tabellenabschnitt ganz normal Syltes zuweisen.

Poste mal dein HTML dazu, dann ist es angenehmer ein Beispiel zu machen

Sempervivum · 14. September 2016

"Mit Style in der Zelle kann ich nicht arbeiten, weil die Zellen generiert werden und ich keinen Einfluss habe."

Normaler Weise hätte ich empfohlen, dieser einen Zelle eine ID zu geben und sie damit zu gestalten. Aber wenn das so ist, würde ich dir empfehlen, dich mit CSS :nth-child() bzw. :nth-of-type() vertraut zu machen, damit kannst Du eine bestimmte Zelle in der Tabelle ansprechen wenn Du ihre Position kennst.

"Tabellen sind eigentlich Oldshool und zu vermeiden" - so pauschal sollte man das IMO nicht sagen. Es trifft zu, wenn man Tabellen für Layout-Zwecke zweckentfremdet, aber es gibt auch Strukturen, die semantisch tatsächlich eine Tabelle sind und mit HTML als solche abgebildet werden können.

paUw · 15. September 2016

Guten Morgen,

danke für die Antworten, ich denke nun es wird nicht funktionieren.

Es ist übrigens eine "echte Tabelle" die mit Zahlen aus einer DB gefüllt wird. Also kein Layout.

VIelen Dank
Uwe

Sempervivum · 15. September 2016

Warum meinst du, es wird nicht funktionieren? Kennst Du die Position nicht? Wenn Du Javascript verwenden kannst, kannst Du dich auch auf den Inhalt beziehen.

paUw · 15. September 2016

Zitat von Sempervivum

Warum meinst du, es wird nicht funktionieren? Kennst Du die Position nicht? Wenn Du Javascript verwenden kannst, kannst Du dich auch auf den Inhalt beziehen.

Ich nur in der CSS Datei Veränderungen vornehmen.
Hier ist ein vereinfachtes Beisspiel.

CSS

<style type="text/css">
<!--
.MainTab
{
	width:50%;
	font-family : Arial;
	background-color : #FFFF66;
	border-collapse : collapse;
	font-size:14px;
 
}




table.MainTab td
{	border-style : solid;
	border-color : #CC0033;
	border-width : 2px;
}
.Aussen
{
color:#ffffff;
background-color:#CC0033;
text-align:left;
vertical-align:middle;
padding:3px 0 2px 3px;
border-left:2px solid #6600FF;
}
-->
</style>
<table class="MainTab">
<tr>
  <td colspan="2"  class="GruppenKopf">Gruppe der... </td>
  <td rowspan="2" class="GruppenKopf">...Anf&auml;nger</td>
  <td  rowspan="2" class="GruppenKopf">...Stufe 1 </td>
  <td  rowspan="2" class="GruppenKopf">Zusammen</td>
</tr>
<tr>
<td class="Aussen"  >BL</td>
<td class="Aussen" >LK<span class="Footnote"></span></td>
</tr>
<tr>
<td class="GruppenKopf" rowspan="8">NRW</td>
<td class="GruppenKopf" >BOT</td>
<td >500</td>
<td >500</td>
<td class="Sum">1000</td>
</tr>
  <tr>
	<td  rowspan="2">HER</td>
	<td >200</td>
	<td >400</td>
	<td class="sumf">600</td>
  </tr>
</table>

Alles anzeigen

Die roten Zellen sind unterschiedlich, mal ist es eine, es können aber auch drei sein. Das ergibt sich aus der Abfrage. Ich hätte halt gerne um die roten Zellen eine weise Umrandung.

Beste Grüße

Sempervivum · 15. September 2016

Sind die roten Zellen diese?

CSS

.Aussen{color:#ffffff;background-color:#CC0033;text-align:left;vertical-align:middle;padding:3px 0 2px 3px;border-left:2px solid #6600FF;}

Dann wäre es ganz einfach, Du brauchst dort nur ein border:2px solid white hinzu zu fügen.

paUw · 15. September 2016

Richtig! Genau das geht ja nicht.

MfG

Sempervivum · 15. September 2016

?? Wieso nicht? Du schreibst doch, dass Du auf das CSS Zugriff hast?
PS: Du kannst es natürlich auch getrennt notieren:

CSS

.Aussen{border: 2px solid white;}

paUw · 15. September 2016

Naja, klar, mache ich das, dann passiert nix. So hatte ich es versucht.
Es bleibt wie es ist, dass ist mein Problem.

Sempervivum · 15. September 2016

Ich bin der Meinung, dass es funktionieren müsste. Poste doch mal die URL der Seite (mit deiner Änderung) damit man es mit den Entwicklertools analysieren kann.

paUw · 15. September 2016

Ich kann da nichts posten, das ist intern in der Einrichtung.

Doch wenn Du den Quellcode nimmst, sollte es nicht klappen, wenn doch verstehe ich es nciht.

Beste Grüße

Sempervivum · 15. September 2016

Habe jetzt deinen Code in eine Testseite eingefügt. Der Grund, dass es nicht funktioniert, ist offenbar, dass das CSS, das man bei .Aussen einfügt durch dieses überschrieben wird:

CSS

table.MainTab td {    border-style: solid;    border-color: #CC0033;    border-width: 2px;}

Das kann man beheben, wenn man !important hinzu fügt:

CSS

border: 4px solid white !important;

Das funktioniert bei mir, aber wahrscheinlich ist der Effekt nicht das, was Du dir erhoffst, weil der rote Rand verschwindet.

Sempervivum · 15. September 2016

PS: Möglicher Weise ist eine Lösung ein Schatten mit harter Grenze nach innen. Habe jetzt keine Zeit mehr, Du kannst es ja selber mal probieren.

paUw · 15. September 2016

Danke, important, dass wusste ich nicht.

Beste Grüße

CSS in einer Tabellenzelle

Jetzt mitmachen!

Teilen