Revision 676ad700
Von Cem Aydin vor 8 Monaten hinzugefügt
- ID 676ad700cbbedf026a35b26fe2e60a7bcd9f9cae
- Vorgänger a36a2787
css/design40/manual/tables.html | ||
---|---|---|
445 | 445 |
.listrow_error |
446 | 446 |
.listrow_info |
447 | 447 |
.listrow_warning |
448 |
.listrow_error0 |
|
449 |
.listrow_error1 |
|
450 | 448 |
</code></pre> |
451 | 449 |
|
452 | 450 |
<p>Die Farben entsprechen dabei den standard Farben, welche auch z.B. bei den Flash Messages verwendet werden. |
453 | 451 |
Siehe dazu auch: <a href="farben.html" title="Details zum Einsatz von Farben in Kivitendo">Einsatz von Farben</a></p> |
454 | 452 |
|
453 |
<p>Die Reihen werden dabei automatisch alterniert (hell/dunkel).</p> |
|
454 |
|
|
455 | 455 |
<table class="tbl-list"> |
456 |
<caption>Listen-Tabelle mit Farben</caption> |
|
456 |
<caption>Listen-Tabelle mit Farben automatisch alterniert</caption>
|
|
457 | 457 |
<colgroup> |
458 | 458 |
<col class="wi-small"><col class="wi-small"><col class="wi-small"><col class="wi-small"><col class="wi-small"> |
459 | 459 |
</colgroup> |
... | ... | |
468 | 468 |
</thead> |
469 | 469 |
<tbody> |
470 | 470 |
<tr class="listrow_ok"> |
471 |
<th>Row 1</th> |
|
471 |
<th>.listrow_ok</th> |
|
472 |
<td>R1C1</td> |
|
473 |
<td>R1C2R1C2R1C2R1C2</td> |
|
474 |
<td>R1C3</td> |
|
475 |
<td>R1C4</td> |
|
476 |
</tr> |
|
477 |
<tr class="listrow_ok"> |
|
478 |
<th>.listrow_ok</th> |
|
479 |
<td>R1C1</td> |
|
480 |
<td>R1C2R1C2R1C2R1C2</td> |
|
481 |
<td>R1C3</td> |
|
482 |
<td>R1C4</td> |
|
483 |
</tr> |
|
484 |
<tr class="listrow_ok"> |
|
485 |
<th>.listrow_ok</th> |
|
486 |
<td>R1C1</td> |
|
487 |
<td>R1C2R1C2R1C2R1C2</td> |
|
488 |
<td>R1C3</td> |
|
489 |
<td>R1C4</td> |
|
490 |
</tr> |
|
491 |
<tr class="listrow_ok"> |
|
492 |
<th>.listrow_ok</th> |
|
472 | 493 |
<td>R1C1</td> |
473 | 494 |
<td>R1C2R1C2R1C2R1C2</td> |
474 | 495 |
<td>R1C3</td> |
475 | 496 |
<td>R1C4</td> |
476 | 497 |
</tr> |
477 | 498 |
<tr class="listrow_error"> |
478 |
<th>Row 2</th> |
|
499 |
<th>.listrow_error</th> |
|
500 |
<td>R2C1</td> |
|
501 |
<td>R2C2</td> |
|
502 |
<td>R2C3</td> |
|
503 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
504 |
</tr> |
|
505 |
<tr class="listrow_error"> |
|
506 |
<th>.listrow_error</th> |
|
507 |
<td>R2C1</td> |
|
508 |
<td>R2C2</td> |
|
509 |
<td>R2C3</td> |
|
510 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
511 |
</tr> |
|
512 |
<tr class="listrow_error"> |
|
513 |
<th>.listrow_error</th> |
|
514 |
<td>R2C1</td> |
|
515 |
<td>R2C2</td> |
|
516 |
<td>R2C3</td> |
|
517 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
518 |
</tr> |
|
519 |
<tr class="listrow_error"> |
|
520 |
<th>.listrow_error</th> |
|
479 | 521 |
<td>R2C1</td> |
480 | 522 |
<td>R2C2</td> |
481 | 523 |
<td>R2C3</td> |
482 | 524 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
483 | 525 |
</tr> |
484 | 526 |
<tr class="listrow_info"> |
485 |
<th>Row 3</th> |
|
527 |
<th>.listrow_info</th> |
|
528 |
<td>R3C1</td> |
|
529 |
<td>R3C2</td> |
|
530 |
<td>R3C3</td> |
|
531 |
<td>R3C4</td> |
|
532 |
</tr> |
|
533 |
<tr class="listrow_info"> |
|
534 |
<th>.listrow_info</th> |
|
535 |
<td>R3C1</td> |
|
536 |
<td>R3C2</td> |
|
537 |
<td>R3C3</td> |
|
538 |
<td>R3C4</td> |
|
539 |
</tr> |
|
540 |
<tr class="listrow_info"> |
|
541 |
<th>.listrow_info</th> |
|
542 |
<td>R3C1</td> |
|
543 |
<td>R3C2</td> |
|
544 |
<td>R3C3</td> |
|
545 |
<td>R3C4</td> |
|
546 |
</tr> |
|
547 |
<tr class="listrow_info"> |
|
548 |
<th>.listrow_info</th> |
|
486 | 549 |
<td>R3C1</td> |
487 | 550 |
<td>R3C2</td> |
488 | 551 |
<td>R3C3</td> |
489 | 552 |
<td>R3C4</td> |
490 | 553 |
</tr> |
491 | 554 |
<tr class="listrow_warning"> |
492 |
<th>Row 4</th>
|
|
555 |
<th>.listrow_warning</th>
|
|
493 | 556 |
<td>R4C1</td> |
494 | 557 |
<td>R4C2</td> |
495 | 558 |
<td>R4C3</td> |
496 | 559 |
<td>R4C4</td> |
497 | 560 |
</tr> |
561 |
<tr class="listrow_warning"> |
|
562 |
<th>.listrow_warning</th> |
|
563 |
<td>R4C1</td> |
|
564 |
<td>R4C2</td> |
|
565 |
<td>R4C3</td> |
|
566 |
<td>R4C4</td> |
|
567 |
</tr> |
|
568 |
<tr class="listrow_warning"> |
|
569 |
<th>.listrow_warning</th> |
|
570 |
<td>R4C1</td> |
|
571 |
<td>R4C2</td> |
|
572 |
<td>R4C3</td> |
|
573 |
<td>R4C4</td> |
|
574 |
</tr> |
|
575 |
<tr class="listrow_warning"> |
|
576 |
<th>.listrow_warning</th> |
|
577 |
<td>R4C1</td> |
|
578 |
<td>R4C2</td> |
|
579 |
<td>R4C3</td> |
|
580 |
<td>R4C4</td> |
|
581 |
</tr> |
|
582 |
</tbody> |
|
583 |
</table> |
|
584 |
|
|
585 |
<p>Falls die Alternierung manuell gesetzt werden soll, kann dies mit den folgenden Klassen gemacht werden:</p> |
|
586 |
|
|
587 |
<pre><code>.listrow0 |
|
588 |
.listrow1 |
|
589 |
.listrow_ok0 |
|
590 |
.listrow_ok1 |
|
591 |
.listrow_error0 |
|
592 |
.listrow_error1 |
|
593 |
.listrow_info0 |
|
594 |
.listrow_info1 |
|
595 |
.listrow_warning0 |
|
596 |
.listrow_warning1 |
|
597 |
</code></pre> |
|
598 |
|
|
599 |
<table class="tbl-list"> |
|
600 |
<caption>Listen-Tabelle mit Farben manuell alterniert</caption> |
|
601 |
<colgroup> |
|
602 |
<col class="wi-small"><col class="wi-small"><col class="wi-small"><col class="wi-small"><col class="wi-small"> |
|
603 |
</colgroup> |
|
604 |
<thead> |
|
605 |
<tr> |
|
606 |
<th></th> |
|
607 |
<th>Column 1</th> |
|
608 |
<th>Column 2</th> |
|
609 |
<th>Column 3</th> |
|
610 |
<th>Column 4</th> |
|
611 |
</tr> |
|
612 |
</thead> |
|
613 |
<tbody> |
|
614 |
<tr class="listrow0"> |
|
615 |
<th>.listrow0</th> |
|
616 |
<td>R2C1</td> |
|
617 |
<td>R2C2</td> |
|
618 |
<td>R2C3</td> |
|
619 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
620 |
</tr> |
|
621 |
<tr class="listrow0"> |
|
622 |
<th>.listrow0</th> |
|
623 |
<td>R2C1</td> |
|
624 |
<td>R2C2</td> |
|
625 |
<td>R2C3</td> |
|
626 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
627 |
</tr> |
|
628 |
<tr class="listrow1"> |
|
629 |
<th>.listrow1</th> |
|
630 |
<td>R2C1</td> |
|
631 |
<td>R2C2</td> |
|
632 |
<td>R2C3</td> |
|
633 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
634 |
</tr> |
|
635 |
<tr class="listrow1"> |
|
636 |
<th>.listrow1</th> |
|
637 |
<td>R2C1</td> |
|
638 |
<td>R2C2</td> |
|
639 |
<td>R2C3</td> |
|
640 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
641 |
</tr> |
|
642 |
<tr class="listrow_ok0"> |
|
643 |
<th>.listrow_ok0</th> |
|
644 |
<td>R2C1</td> |
|
645 |
<td>R2C2</td> |
|
646 |
<td>R2C3</td> |
|
647 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
648 |
</tr> |
|
649 |
<tr class="listrow_ok0"> |
|
650 |
<th>.listrow_ok0</th> |
|
651 |
<td>R2C1</td> |
|
652 |
<td>R2C2</td> |
|
653 |
<td>R2C3</td> |
|
654 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
655 |
</tr> |
|
656 |
<tr class="listrow_ok1"> |
|
657 |
<th>.listrow_ok1</th> |
|
658 |
<td>R2C1</td> |
|
659 |
<td>R2C2</td> |
|
660 |
<td>R2C3</td> |
|
661 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
662 |
</tr> |
|
663 |
<tr class="listrow_ok1"> |
|
664 |
<th>.listrow_ok1</th> |
|
665 |
<td>R2C1</td> |
|
666 |
<td>R2C2</td> |
|
667 |
<td>R2C3</td> |
|
668 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
669 |
</tr> |
|
498 | 670 |
<tr class="listrow_error0"> |
499 |
<th>Row 2</th> |
|
671 |
<th>.listrow_error0</th> |
|
672 |
<td>R2C1</td> |
|
673 |
<td>R2C2</td> |
|
674 |
<td>R2C3</td> |
|
675 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
676 |
</tr> |
|
677 |
<tr class="listrow_error0"> |
|
678 |
<th>.listrow_error0</th> |
|
500 | 679 |
<td>R2C1</td> |
501 | 680 |
<td>R2C2</td> |
502 | 681 |
<td>R2C3</td> |
503 | 682 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
504 | 683 |
</tr> |
505 | 684 |
<tr class="listrow_error1"> |
506 |
<th>Row 2</th> |
|
685 |
<th>.listrow_error1</th> |
|
686 |
<td>R2C1</td> |
|
687 |
<td>R2C2</td> |
|
688 |
<td>R2C3</td> |
|
689 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
690 |
</tr> |
|
691 |
<tr class="listrow_error1"> |
|
692 |
<th>.listrow_error1</th> |
|
693 |
<td>R2C1</td> |
|
694 |
<td>R2C2</td> |
|
695 |
<td>R2C3</td> |
|
696 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
697 |
</tr> |
|
698 |
<tr class="listrow_info0"> |
|
699 |
<th>.listrow_info0</th> |
|
700 |
<td>R2C1</td> |
|
701 |
<td>R2C2</td> |
|
702 |
<td>R2C3</td> |
|
703 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
704 |
</tr> |
|
705 |
<tr class="listrow_info0"> |
|
706 |
<th>.listrow_info0</th> |
|
707 |
<td>R2C1</td> |
|
708 |
<td>R2C2</td> |
|
709 |
<td>R2C3</td> |
|
710 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
711 |
</tr> |
|
712 |
<tr class="listrow_info1"> |
|
713 |
<th>.listrow_info1</th> |
|
714 |
<td>R2C1</td> |
|
715 |
<td>R2C2</td> |
|
716 |
<td>R2C3</td> |
|
717 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
718 |
</tr> |
|
719 |
<tr class="listrow_info1"> |
|
720 |
<th>.listrow_info1</th> |
|
721 |
<td>R2C1</td> |
|
722 |
<td>R2C2</td> |
|
723 |
<td>R2C3</td> |
|
724 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
725 |
</tr> |
|
726 |
<tr class="listrow_warning0"> |
|
727 |
<th>.listrow_warning0</th> |
|
728 |
<td>R2C1</td> |
|
729 |
<td>R2C2</td> |
|
730 |
<td>R2C3</td> |
|
731 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
732 |
</tr> |
|
733 |
<tr class="listrow_warning0"> |
|
734 |
<th>.listrow_warning0</th> |
|
735 |
<td>R2C1</td> |
|
736 |
<td>R2C2</td> |
|
737 |
<td>R2C3</td> |
|
738 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
739 |
</tr> |
|
740 |
<tr class="listrow_warning1"> |
|
741 |
<th>.listrow_warning1</th> |
|
742 |
<td>R2C1</td> |
|
743 |
<td>R2C2</td> |
|
744 |
<td>R2C3</td> |
|
745 |
<td>R2C4R2C4R2C4R2C4R2C4</td> |
|
746 |
</tr> |
|
747 |
<tr class="listrow_warning1"> |
|
748 |
<th>.listrow_warning1</th> |
|
507 | 749 |
<td>R2C1</td> |
508 | 750 |
<td>R2C2</td> |
509 | 751 |
<td>R2C3</td> |
Auch abrufbar als: Unified diff
Design4.0: Überarbeitung/Ergänzung der Klassen für Zebra Effekt in Tabellen
Farben in Reihen werden automatisch alterniert,
können aber falls gewünscht auch manuell gesetzt werden.
Siehe dazu auch die Design 4.0 HTML/CSS Dokumentation/Beispiele unter:
/css/design40/manual/tables.html
Damit sollten auch Fehler #616, sowie #542 (teilweise) behoben werden können.
Allenfalls braucht es dazu noch Anpassungen in den templates.