|
|||
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">
Code:
.spalte_xy {background: #00FF00; font-weight: bold;} 2. col/colgroup: HTML-Code:
<col class="spalte_XY"/>
3. Nutzung der css Pseudoklasse nth-of-type: Code:
tbody td:nth-of-type(3){ackground: #00FF00; font-weight: bold;} 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> |
Sponsored Links |
|
|||
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" |
|
|||
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. |
|
|||
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. |
|
|||
Zitat:
Zitat:
Zitat:
ja Paging ist möglich, aber es gibt explizit den Wunsch vom Kunden "alles" mit einmal anzeigen zu können |
|
|||
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. |
|
|||
Zitat:
Dann werd ich mal Variante 1 ausprobieren und mit dem google-Teil messen |
|
|||
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. |
Sponsored Links |
|
|||
Zitat:
HTML-Code:
<body> <table> </table </body> EDIT: ahh jetzt funnktionierts Geändert von FlavorFlav (21.10.2013 um 20:12 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |