zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tabellenspalten stylen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.10.2013, 16:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2007
Beiträge: 12
FlavorFlav befindet sich auf einem aufstrebenden Ast
Standard Tabellenspalten stylen

Hallo,
ich möchte gern in einer Tabelle einzelne Spalten formatieren. Zum Beispiel font-width und background. Ich habe folgende 3 Möglichkeiten bisher gefunden. Leider gefällt mir keine bisher:

1.
an jede Zelle der Spalte ein class-Element kleben.
html:
HTML-Code:
<td class="spalte_XY">
css:
Code:
.spalte_xy {background: #00FF00; font-weight: bold;}
Problem: viel redundanter code (tabellen können mehr als 1000 zeilen haben)

2.
col/colgroup:
HTML-Code:
 <col class="spalte_XY"/>
Problem: font-width wird nicht unterstützt

3.
Nutzung der css Pseudoklasse nth-of-type:
Code:
 tbody td:nth-of-type(3){ackground: #00FF00; font-weight: bold;}
Problem: blöderweise können die Spalten nicht durchgezählt werden, da nicht bekannt ist in welcher Reihenfolge welche Spalte erscheint.

Mein Problem ist also:
- ich möchte ungern jede <td>-Zelle mit einem class-attribut versehen, da ich dann so viel redundaten Mark-Up Code bekomme
- die Tabelle wird dynamisch erzeugt. Es können Spalten fehlen oder zusätzliche erscheinen. Eine addressierung per Name/Id wäre gut.

Fällt jemanden noch etwas besseres ein?

Hier nochmal meine Lösungen als komplette Beispiele:
HTML-Code:
<style type="text/css"> 
    #nthoftype tbody td:nth-of-type(3){	background: #00FF00; font-weight: bold; }
    
    .spalte_xy {background: #00FF00; font-weight: bold;}
</style>

<h1>1</h1>
<table id="td">
    <tr>
        <td>11</td>
        <td>21</td>
        <td class="spalte_XY">31</td>
    </tr>
    <tr>
        <td>12</td>
        <td>22</td>
        <td class="spalte_XY">32</td>
    </tr>
    <tr>
        <td>13</td>
        <td>23</td>
        <td class="spalte_XY">33</td>
    </tr>
</table>

<h1>2</h1>
<table id="col">
    <col />
    <col />
    <col class="spalte_XY"/>
    <tr>
        <td>11</td>
        <td>21</td>
        <td>31</td>
    </tr>
    <tr>
        <td>12</td>
        <td>22</td>
        <td>32</td>
    </tr>
    <tr>
        <td>13</td>
        <td>23</td>
        <td>33</td>
    </tr>
</table>

<h1>3</h1>
<table id="nthoftype">

    <tr>
        <td>11</td>
        <td>21</td>
        <td>31</td>
    </tr>
    <tr>
        <td>12</td>
        <td>22</td>
        <td>32</td>
    </tr>
    <tr>
        <td>13</td>
        <td>23</td>
        <td>33</td>
    </tr>
</table>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.10.2013, 17:12
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Nimm Lösung 1. Alles andere macht dir nur Kopfschmerzen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.10.2013, 17:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2007
Beiträge: 12
FlavorFlav befindet sich auf einem aufstrebenden Ast
Standard

aber das produziert unmengen an mark-up.
wenn ich davon ausgehe dass ich ca 1000 zeilen habe und ca 10 spalten habe, bei dme markup:
Code:
 class="c1"
das sind 11 Zeichen. Also 11*10*1000 = 1100000 Zeichen. Das sind rund 1 MegaByte (bei sparsamsten charset) an sinnlosem overhead, der übertragen und vom Browser interpretiert werden muss.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.10.2013, 17:33
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.825
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Wer erzeugt die Tabelle dynamisch? Du selbst? Dann könntest du bei der Erzeugung auch feststellen, welche Spalte relevant ist und die Formate entsprechend anpassen (z.B. das Argument von :nth-of-type dynamisch einsetzen).

Andernfalls ist Lösung 1 durchaus noch brauchbar. Du erzeugst zwar sehr viel Markup, aber weil dieses redundant ist, wird es auch entsprechend gut komprimiert.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.10.2013, 17:35
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Dann übertrage halt immer nur 100 Reihen der Tabelle und füge ans Ende eine Seitennavigation ein, so wie das hier im Forum auch ist.
Davon abgesehen übertragen die meisten Server heutzutage komprimierte Dateien.

siehe gzip
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #6 (permalink)  
Alt 21.10.2013, 19:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2007
Beiträge: 12
FlavorFlav befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gato Beitrag anzeigen
Wer erzeugt die Tabelle dynamisch? Du selbst? Dann könntest du bei der Erzeugung auch feststellen, welche Spalte relevant ist und die Formate entsprechend anpassen (z.B. das Argument von :nth-of-type dynamisch einsetzen).
Es geht um ein CMS wo Nutzer selbst Skins/Themes erstellen können. Das heißt, das Markup erzeuge ich, aber css soll von Nutzern ausgetauscht werden können. Das heißt, ich kann/möchte das css nicht dynamisch erzeugen.

Zitat:
Zitat von gato Beitrag anzeigen
Andernfalls ist Lösung 1 durchaus noch brauchbar. Du erzeugst zwar sehr viel Markup, aber weil dieses redundant ist, wird es auch entsprechend gut komprimiert.
Zitat:
Zitat von explanator Beitrag anzeigen
Davon abgesehen übertragen die meisten Server heutzutage komprimierte Dateien.

siehe gzip
Lösung 1 wäre auch super einfach umzusetzen für mich aber irgendwie würd ihc das gern ohne diese unmengen von zusätzlichem mark-up lösen. und die Parsing/Rendering Zeit leidet da nicht drunter?

Zitat:
Zitat von explanator Beitrag anzeigen
Dann übertrage halt immer nur 100 Reihen der Tabelle und füge ans Ende eine Seitennavigation ein, so wie das hier im Forum auch ist.
ja Paging ist möglich, aber es gibt explizit den Wunsch vom Kunden "alles" mit einmal anzeigen zu können
Mit Zitat antworten
  #7 (permalink)  
Alt 21.10.2013, 19:10
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

So wie du das haben willst, hast du gar keine andere Wahl. Das es bis zur kompletten Darstellung im Browser einen Augenblick länger dauert ist logisch, ob man das überhaupt merkt, liegt sicherlich auch an der eingesetzten Hardware und der Internetverbindung. Ich würde es an deiner Stelle einfach mal austesten, ist mit PHP ja schnell umgesetzt. Hochladen und im Entwicklertool des Browser die Zeiten ansehen.

Du kannst auch bei Google die Seite testen -> https://developers.google.com/speed/pagespeed/
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #8 (permalink)  
Alt 21.10.2013, 19:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2007
Beiträge: 12
FlavorFlav befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
So wie du das haben willst, hast du gar keine andere Wahl. Das es bis zur kompletten Darstellung im Browser einen Augenblick länger dauert ist logisch, ob man das überhaupt merkt, liegt sicherlich auch an der eingesetzten Hardware und der Internetverbindung. Ich würde es an deiner Stelle einfach mal austesten, ist mit PHP ja schnell umgesetzt. Hochladen und im Entwicklertool des Browser die Zeiten ansehen.

Du kannst auch bei Google die Seite testen -> https://developers.google.com/speed/pagespeed/
ok, dann erstmal Danke für die Meinungen. Ich dachte, dass es vielleicht noch einen CSS-Trick gibt, auf den ich nicht selbst gekommen bin.
Dann werd ich mal Variante 1 ausprobieren und mit dem google-Teil messen
Mit Zitat antworten
  #9 (permalink)  
Alt 21.10.2013, 20:02
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Habe mal was erstellt, kannst du ja mal testen

Einfach den Parameter anzahl auf die gewünschte Zeilenanzahl einstellen:

Tabellentest
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.10.2013, 20:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2007
Beiträge: 12
FlavorFlav befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Habe mal was erstellt, kannst du ja mal testen

Einfach den Parameter anzahl auf die gewünschte Zeilenanzahl einstellen:

Tabellentest
hmm bei mir erscheint eien seite mit defektem html:
HTML-Code:
 <body>
  <table>
</table  </body>
aber ich glaube zu wissen, was die seite macht.

EDIT: ahh jetzt funnktionierts

Geändert von FlavorFlav (21.10.2013 um 20:12 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Button Stylen =) Cybertronic CSS 27 10.06.2013 17:14
Link stylen: wenn man drüberfahrt soll er sich unterstreichen cedi44 CSS 4 07.01.2013 20:13
disabled Button stylen Camelrider CSS 3 30.06.2009 16:13
Linkliste stylen? jenny79 CSS 10 20.11.2007 15:35
Ansprechen von Tabellenspalten PriorPhil CSS 2 10.08.2006 18:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:41 Uhr.