tlberlus
Sep 30, 2015, updated at 12:23:17 (UTC)
view2363
view9
0
Goto Top

Tabellen-Formatierung - CSS

GermansolvedQuestionCSSDevelopment
Hallo Zusammen,

ich habe ein Report-Skript geschrieben, was mir Daten in einer HTML-Datei zusammenfasst. Diese wird per EMail verschickt. Damit das ganze übersichtlicher wird wollte ich die Geschichte per CSS formatieren.
Soweit die Theorie.

Folgenden Code habe ich mir zusammengebastelt:

<code/>
body{
background-color: white;
color:black;
}

table, th, td {
border: 1px solid #040;
border-collapse: collapse;
empty-cells: hide;
background-color: white;

font-family: Lucida Console;
font-size: 11pt;
text-align: center;
}
th{
background-color:cyan;
}
h1{
width:200pt;
background-color: limegreen;
color:black;
font-size: 15pt;
}

h2{
background-color:lightblue;
width:200pt;
}
h3{
background-color:orangered;
width:200pt;
}


Das Ganze sieht dann so aus:
b94f50f2a1ce9c14797d5d4205f17cff

Jetzt meine Frage:

Kann ich (z.B. farbliche) Markierungen setzen, wenn ein bestimmter Trigger(z.B. Warnung) auftritt?

Grüße,

Tiberius

Edit:
Die html-Tabelle sieht so aus:
<code/>
<tr><td>C:\</td><td>60</td><td>11</td><td>19</td><td>OK</td></tr>
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 284226

Url: https://administrator.de/contentid/284226

Printed on: April 25, 2024 at 21:04 o'clock

9 Comments
Latest comment
Goto Top
Member: michi1983
michi1983 Sep 30, 2015 at 09:33:26 (UTC)
Goto Top
Hallo,

mit CSS geht das nicht, nein.

Gruß
Member: colinardo
colinardo Sep 30, 2015 updated at 09:57:40 (UTC)
Goto Top
mit CSS geht das nicht, nein.
Doch, die Zellen einer Klasse zuordnen und dann mit CSS die Klasse einfärben:
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Demo</title>
</head>
<style type="text/css">  
td.warning {background-color:red}
</style>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">  
  <tr>
    <td scope="col">OK</td>  
  </tr>
  <tr>
    <td class="warning">WARNUNG</td>  
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td class="warning">WARNUNG</td>  
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td class="warning">WARNUNG</td>  
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td class="warning">WARNUNG</td>  
  </tr>
</table>
</body>
</html>
Grüße Uwe
Member: michi1983
michi1983 Sep 30, 2015 updated at 09:59:28 (UTC)
Goto Top
Zitat von @colinardo:

mit CSS geht das nicht, nein.
Doch, die Zellen einer Klasse zuordnen und dann mit CSS die Klasse einfärben:
Schon, aber dann muss das sein Script erst mal machen.
Ich ging von seiner gegebenen HTML Struktur aus.
Gruß
Member: colinardo
colinardo Sep 30, 2015 updated at 10:08:13 (UTC)
Goto Top
Zitat von @michi1983:
Ich ging von seiner gegebenen HTML Struktur aus.
Gruß
Das geht auch ohne Anpassung der Ausgabe
https://api.jquery.com/contains-selector/

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Demo</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>
$(document).ready(function(e) {
    $("td:contains('WARNUNG')").css("background-color", "red");  
});
</script>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">  
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td class="warning">WARNUNG</td>  
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td class="warning">WARNUNG</td>  
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td class="warning">WARNUNG</td>  
  </tr>
  <tr>
    <td>OK</td>
  </tr>
  <tr>
    <td class="warning">WARNUNG</td>  
  </tr>
</table>
</body>
</html>
Member: michi1983
michi1983 Sep 30, 2015 updated at 10:07:24 (UTC)
Goto Top
Zitat von @colinardo:

Zitat von @michi1983:
Ich ging von seiner gegebenen HTML Struktur aus.
Gruß
Das geht auch ohne Anpassung der Ausgabe
https://api.jquery.com/contains-selector/
Wieder korrekt, aber das ist kein CSS sondern Jquery welches ein CSS Atribut abfragt face-wink
Ich bin hier schon lange genug dabei um zu wissen, dass du einer der Code-Götter hier bist, deshalb lege ich mich bestimmt nicht mit deinem Know-How an, keine Sorge.

Gruß
Member: colinardo
colinardo Sep 30, 2015 updated at 10:37:51 (UTC)
Goto Top
Kein Thema, ich denke wenn er die Tabelle schon selbst erstellt hat er ja alle Möglichkeiten, die einfachste und E-Mail kompatible ist per Klasse oder auch per zusätzlichem Attribut.
CSS3 kennt hier nativ auch das Attribute-Substring Matching das man dafür nutzen kann, leider kein Content-Matching. Aber CSS3 in E-Mails ... wegen der vielfallt der Clients und supportetem CSS dann eher nicht zu empfehlen.

Aber wenn er die Tabelle schon selber erstellt kann er die Zellen auch gleich in seinem Code einfärben face-smile
Member: TlBERlUS
TlBERlUS Sep 30, 2015 at 11:54:16 (UTC)
Goto Top
Zitat von @colinardo:

mit CSS geht das nicht, nein.
Doch, die Zellen einer Klasse zuordnen und dann mit CSS die Klasse einfärben:

Kann ich das auch auf die gesamte Zeile ausbreiten, ohne
<td class="warning"

vor jeden Punkt zu schreiben?
Member: colinardo
Solution colinardo Sep 30, 2015 updated at 12:23:17 (UTC)
Goto Top
Weise die Klasse der Zeile zu
<tr class="warning"><td></td>......</tr>
und im CSS schreibst du es dann so
tr.warning td {background-color:red}
Dann wird die Formatierung auf alle Zellen der Zeile angewendet.
Member: TlBERlUS
TlBERlUS Sep 30, 2015 at 12:23:11 (UTC)
Goto Top
Funktioniert. Danke euch beiden.
GermansolvedQuestionCSSDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 Comments