row einer Tabelle verstecken, aber nicht entsprechendes relative td

Volker

Hallo html/CSS-Profies,

Ich habe eine "normale" Tabelle.
Eine Zeile ist allerdings relativ "unwichtig" und soll keine eigne Zeile erhalten, sondern zwischen den Zeilen schweben.
Daher habe ich die td-elemente relativ gemacht und etwas verschoben, sodass sie "zwischen" den Zeilen stehen.
Nun muss aber noch die entsprechende Zeile unsichtbar gemacht werden.
Wenn ich es unsichtbar mache, dann werden aber auch die relativen td unsichtbar und ich kann sie nicht einschalten.

Da es etwas doof zu erklären ist, habe ich 3 sehr kurze Beispiele angehängt.
Beispiel V1: Meine "wichtige" Tabelle.
Beispiel V2: Die Tabelle ergänzt um die "nicht so wichtige" Information.
Beispiel V3: Die "nicht so wichtige" Information ist an die richtige Stelle geschoben worden.

Was muss ich ändern um die Spalte "PAUSE" jetzt zu verstecken? Die Zeile soll also verschwinden; die "P"s aber sollen bleiben.

Würde mich über Hilfe/Tipps freuen.

Schönen Gruß,
Volker

modem-kind

Hallo,
So ????
oder wie möchtest ...
--->

MrMurphy

Hallo

Ich vermute das es so aussehen soll:

Gruss

MrMurphy

Volker

Hallo MrMurphy,

Ja, es soll genaus so aussehen wie in deinem Screenshot. Wie hast du das gemacht?

Gruß
Volker

MrMurphy

Hallo

Zitat

Wie hast du das gemacht?

Das ist eine einfache Grafik. Ich habe dein drittes Beispiel genommen, davon ein Bildschirmfoto gemacht und im Bildbearbeitungsprogramm Gimp bearbeitet.

Ich wollte damit nur den Leuten, die sich mit Tabellen unter XHTML auskennen, zeigen, wie das Ergebnis deiner Ansicht nach wohl aussehen soll. Das ging auch für mich aus deiner Frage nicht eindeutig hervor. Damit scheine ich richtig zu liegen und jetzt können die Leute loslegen, die sich mit Tabellen auskennen.

Gruss

MrMurphy

Volker

ah. ok. Danke. Dann warte ich jetzt mal auf die html/css-Tabellen-Profies. Ich bekomme es leider nicht hin

djheke

Vielleicht habe ich nur Bahnhof verstanden, aber meinst Du es so?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Stundenplan</title>
<meta charset="UTF-8">
<style>
* {
 margin:0;
 padding:0;
}
table {
 border-collapse:collapse;
 margin:50px;
}


th , td {
 border:1px solid #000;
 padding:5px;
}


tr.pause {
 font-size:0;
 position:relative;
}


tr.pause td , tr.pause th {
 padding:0 5px;
}
tr.pause span {
 position:relative;
 display:block;
 font-size:32px;
 position:absolute;
 top:-16px;
 bottom:0;
 color:red;
}
</style>
  </head>


  <body>

    <table border="1">
      <thead>
        <tr><td rowspan="2"></td><th colspan="5">5a</th></tr>
        <tr>
          <!-- span -->
          <th class="xAxis">Mo</th>
          <th class="xAxis">Di</th>
          <th class="xAxis">Mi</th>
          <th class="xAxis">Do</th>
          <th class="xAxis">Fr</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="yAxis">1</th>
          <td>D</td>
          <td>M</td>
          <td>E</td>
          <td>Sp</td>
          <td>Ge</td>
        </tr>
        <tr class="yAxis">
          <th class="yAxis">2</th>
          <td>D</td>
          <td>M</td>
          <td>E</td>
          <td>Sp</td>
          <td>Ge</td>
        </tr>
        <tr>
          <th class="yAxis">3</th>
          <td>D</td>
          <td>M</td>
          <td>E</td>
          <td>Sp</td>
          <td>Ge</td>
        </tr>
    <tr class="pause">
          <th>PAUSE</th>
     <td><span>P</span></td>
         <td><span>P</span></td>
         <td><span>P</span></td>
        <td><span>P</span></td>
         <td><span>P</span></td>
        </tr>
        <tr>
          <th class="yAxis">4</th>
          <td>D</td>
          <td>M</td>
          <td>E</td>
          <td>Sp</td>
          <td>Ge</td>
        </tr>
        <tr>
          <th class="yAxis">5</th>
          <td>D</td>
          <td>M</td>
          <td>E</td>
          <td>Sp</td>
          <td>Ge</td>
        </tr>
        <tr>
          <th class="yAxis">6</th>
          <td>D</td>
          <td>M</td>
          <td>E</td>
          <td>Sp</td>
          <td>Ge</td>
        </tr>
      </tbody>
    </table>




  </body>
</html>

Alles anzeigen

Du kannst noch mit Padding und Margin rumspielen.

@edit: Warum sind Pausen so unwichtig, das sie keine eigene Zeile verdienen?

Volker

Hallo djheke,

Danke! Genau so meinte ich das.

PS: Die Pläne werden sonst einfach zu lang. Schulen haben auch mal locker 10 Stunden pro Tag. Im Lehrerzimmer hängen die Wochenübersichten. Also 5*10=50 Zeilen. Wenn die Schule noch A/B Wochen hat, dann sind das nur für die Stunden also 50*2=100 Zeilen. Wenn dann noch alle Pausen dazukommen würden, dann würde sich das nochmal deutlich aufblähen.
Ich hatte es hier nur mit "Pausen" erklärt. Genau genommen will ich aber gar nicht alle Pausen anzeigen lassen. Dafür sind die zu unwichtig. Aber ich will so die Aufsichten in den Pausen darstellen.

Danke!

Arne Drews

Hallo,

Warum markierst Du den Bereich der Pausen nicht einfach?
So wie in dem Screenshot von djheke ist ja bspw. der Border zwischen den beiden Einträgen vor und nach einer Pause etwas fetter.
Den evtl. noch farblich hervorheben und in einer Legende definieren, dass dies Pausenzeiten symbolisiert.

Ich finde die P dazwischen unübersichtlich...

Volker

Danke für den Vorschlag, aber da kommt jeweils eine Abkürzung/Text hin. Wie gesagt: Es sollen die Orte für die Aufsicht erscheinen. Selbst an mittlegroßen Schulen gibt es da schnell 10 verschiedene Orte für die Aufsicht. An großen Schulen auch mal locker 20 und mehr Orte. Für jedes eine Symbol/Grafik oder änliches sich ausdenken und dann noch merken macht kaum Sinn. Einfacher Text wie "Bushaltestelle", "Eingang", "J-WC", "M-WC", "Sporthalle", ... ist da viel einfacher zu verstehen.

Arne Drews

Naja, wenn wir jetzt schon von 10 verschiedenen Abkürzungen reden, sollte man evtl. mal drüber nachdenken, ob wirklich alles auf eine Übersicht muß?!
Bitte nicht falsch verstehen, ich finds absolut unübersichtlich, aber ich kenne die genauen Anforderungen ja auch nicht...

Volker

Ja, sollte/muss drauf. Nein, ist nicht unübersichtlich.

Erklärung zu "Ja": Es sind die Arbeitszeiten den Lehrers. Wenn da steht "Eingang", dann muss der Lehrer dort aufsicht führen/arbeiten. Insofern wichtig und nötig. (Alternativ wäre es einen Aufsichtplan auszuhängen. Dann muss sich jeder Leher aber um zwei Pläne kümmern; einen Unterrichtsplan und einen Aufsichtsplan. Warum trennen, wenn man es problemlos zusammenlegen kann?)
Erklärung zu "Nein": Bedenke, dass bei einem Lehrer in so einem Plan normalerweise nur etwa 2 Aufsichten eingetragen sind. Also z.B. Montags in der 2 große Pause Aufsicht an den Toiletten und Freitags vor Schulbeginn am Haupteingang.

Arne Drews

Ich habe nur meine Meinung aus Sicht eines möglichen Betrachters des Planes geschildert.
Umsetzen musst Du das, wie Du es für richtig hältst...

djheke

Wenn's nicht gegen den Datenschutz verstößt, dann kannst du uns ja mal ein Beispielplan zeigen. Nur so aus reiner Neugier.

Volker

Ich bin noch nicht ganz fertig mit dem neuen Feature, daher mal nur ein Beispiel von einem Lehrer (sonst wäre der Anhang auch ein paar MB groß).
Die horizontale Variante sieht schon ganz ok aus. In der vertikalen wird der der "Eingang" falsch angezeigt.
Allerdings sehe ich gerade, dass ich einen Fehler bei der automatischen Generierung des html-Codes gemacht habe (ist nicht mehr valide). Ich hoffe, dass es korrekt aussieht sobald ich den Fehler behoben habe.

Volker

Der Fehler war leicht zu beheben. An den 3 angemahnten Stellen darf ich nicht <span> benutzen. Wenn ich es durch <div> ersetze ist es valide. Sieht aber noch immer genau so aus. Irgendwie ist der "Eingang" in der vertikalen Version nicht so wie die anderen Aufsichten. hmm... ich sehe nicht den Fehler ...

djheke

Es könnte am fehlendem transition-origin:wert1 wert2(top left right bottom) liegen. Warum nimmst du soviel Klassen. Die meisten können weg und über :nth-of-type() angesprochen werden.

Beispiel mit nur einigen Klassen

HTML

<!DOCTYPE html>


<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Testplan mit wenigen Klassen</title>


<style>


table {
 width:100%;
 border-collapse:collapse;
}


table.odd_table  {
 page-break-before: always;
}




table.odd_table th , table.odd_table td {
 padding:5px;
 text-align:center;
 vertical-align:top;
}




table.odd_table b {
 display:block;
 padding:3px 0;
 font-weight:normal;
 color:#000;
}


thead tr:nth-child(1) th {
 text-align:left;
}




/*studentsset*/
tbody b:nth-of-type(1) {
 color:#f00;
}


/*subject*/
tbody b:nth-of-type(2) {
 color:#09c;
}
/*room*/
tbody b:nth-of-type(3) {
 color:#444;
}
/*empty*/
.empty {
 background:#eee;
}


 .vertikal thead tr:nth-of-type(2) th:nth-of-type(1),
.vertikal thead tr:nth-of-type(2) th:nth-of-type(4),
.vertikal thead tr:nth-of-type(2) th:nth-of-type(7),
.vertikal tbody td:nth-of-type(1),
.vertikal tbody td:nth-of-type(4),
.vertikal tbody td:nth-of-type(7)  {
 font-size:0;
 padding:0;
 border:none;
 position:relative;
}










.vertikal thead th , .vertikal tbody td  {
 border-left:none;
}


.vertikal tbody th  {
 vertical-align:middle;
}


.vertikal .info b {  
 font-size: 16px;
 position:absolute;
 left:11px;
 top:40px;
 background:yellow;
 color:black;
 transform-origin:bottom left;
 transform: rotate(-90deg); 
 z-index:99; 
}
</style>
  </head>


  <body id="top">
    <table>
      <tr>
        <th>Name der Institution:</th>
        <td> </td>
      </tr>
    </table>
    <table>
      <tr>
        <th>Kommentare:</th>
        <td> </td>
      </tr>
    </table>
    <p><strong>Inhaltsverzeichnis</strong></p>
    <ul>
      <li><a href="#table_10">Jenny</a></li>
    </ul>
    <p>&nbsp;</p>


    <table id="table_10" border="1" class="odd_table vertikal">
      <caption> </caption>
      <thead>
        <tr><td rowspan="2"></td><th colspan="9">Jenny</th></tr>
        <tr>
         <th><b>Früh</b></th>
          <th>1</th>
          <th>2</th>
          <th>P1</th>
          <th>3</th>
          <th>4</th>
          <th>P2</th> 
          <th>5</th>
          <th>6</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
         <td colspan="10">19.07.16 18:41</td>
        </tr>
      </tfoot>
      <tbody>
         <tr>
          <th>Montag</th>
          <td></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td></td> 
          <td><b>9c</b> <b>MA</b></td>
          <td><b>6d</b> <b>BI</b> <b>401</b></td>
        </tr>


       <tr>
          <th>Dienstag</th>
          <td class="info"><b>Eingang</b></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td></td> 
          <td><b>9c</b> <b>MA</b></td>
          <td><b>6d</b> <b>BI</b> <b>401</b></td>
        </tr>


       <tr>
          <th>Mittwoch</th>
           <td></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td class="info"><b>J-WC</b></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td></td> 
          <td><b>9c</b> <b>MA</b></td>
          <td><b>6d</b> <b>BI</b> <b>401</b></td>
        </tr>


       <tr>
          <th>Donnerstag</th>
          <td></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td class="info"><b>Flure</b></td> 
          <td><b>9c</b> <b>MA</b></td>
          <td><b>6d</b> <b>BI</b> <b>401</b></td>
        </tr>


       <tr>
          <th>Freitag</th>
          <td></td> 
          <td><b>9SW</b> <b>BI</b> <b>401</b></td>
          <td><b>8TC</b> <b>BI</b> <b>403</b></td>
          <td></td> 
          <td><b>7a</b> <b>MA</b></td>
          <td><b>9b</b> <b>MA</b></td>
          <td></td> 
          <td class="empty"></td>
          <td class="empty"></td>
        </tr>
      </tbody>
    </table>




  </body>
</html>

Alles anzeigen

Volker

Ah. Das mit dem transition-origin probiere ich nachher mal in Ruhe aus.

Das mit :nth-of-type is ein guter Vorschlag, den ich aber noch ein paar Jahr verschieben muss. Dafür gibt es zwei Gründe:

1.
Die Tabellen werden schon seit über 10 Jahren so gemacht. Das von dir vorgeschlagene Feature wird aber z.B. "erst" seit 2011 im IE unterstützt. Mir ist bekannt, dass nicht wenige Schulen noch Win XP fahren (sehe ich in der Statistik meines Webservers). Die könnten die Features dann nicht mehr nutzen.
Ja, dass drehen der Box ist auch recht neu. Die Schulen müssen dann entweder mit der horizontalen Version arbeiten statt der vertikalen. Oder auf die auf das "kleiner machen" der Aufsichten verzichten. Aber auf das komplette Färben verzichten? Warum?
Zwei Codes dafür zu schreiben ist nicht sinnvoll. Ich müsste einige Hundert Zeilen Code zwei mal pflegen mit keinem Nutzen. Die neuen Browser verstehen auch den alten Code.

2. Ich setze die Tabellen zum Drucken auch in Qt. Qt unterstützt aber :nth-of-type ebenfalls nicht. Ich müsste dann den Qt-Webbrowser einbinden. Vor etwa ~1 Jahr konnte der aber nicht drucken, sondern nur anzeigen. Ich müsste mal prüfen, ob der dann auch mittlerweile drucken kann. Damit würde aber das Programm mal eben auch mehr als doppelt so viel Speicher auf der Festplatte belegen und den etwa 4-fachen Speicherplatz im RAM benötigen. -> siehe Windows 95 Nutzer.

PS: Nur vorweg: Nein, die Leute werden nicht von XP umsteigen. Sie haben weder für Hardware noch Software Geld. Ich spreche von z.B. von Schulen in Afrika, ...

- - - Aktualisiert - - -

hmm... Das mit transition-origin hat leider nicht geholfen. Mein Webbrowser hat wohl 50%, 50% als default Wert. Das sieht auch ganz gut aus. Andere Wert wie 0%, 0% bzw 100% , 100% machen es nur "schlimmer". Der "Eingang" ist im Vergleich zu den anderen Aufsichten noch immer verschoben.
(Der Fehler könnte natürlich auch sein, dass "Eingang" "richtig" ist und die beiden anderen Aufsichten "falsch" sind. Dann müsste ich die beheben. Ich habe aber keine Ahnung wie, weil ich nicht verstehe warum es dort anders aus sieht.)

- - - Aktualisiert - - -

Ich sehe gerade, dass es in deinem Beispiel besser aussieht. Du arbeitet aber auch mit vielen zusätzlichen Verschiebungen. Mal gucken ob ich das Problem lösen/lokalisieren kann. Ich muss möglich ohne solche "Sonderlösungen" auskommen.
Hintergrund: Ich setze das zum Drucken in Qt. Das Ziel ist es i.d.R. die Tabelle nicht zu klein zu haben (damit man es lesen kann) aber auch nicht zu groß (damit es auf eine Seite passt). Daher kann der Benutzer die Schriftgröße anpassen. Damit muss ich aber auch alle anderen Werte anpassen. Zu viele Dinge sollte der Benutzer aber nicht einstellen müssen, da es sonst nicht schnell/einfach benutzt werden kann. Ich muss also alles relativ machen. Zum "zoomen" darf/soll es nur einen Wert geben.
hmm.. Danke für den Vorschlag. Ich muss es noch einmal genau lesen und gucken wie ich es bei mir umsetzen kann.

djheke

Für arme Schulen gibt es Linux. Eine weitere Alternative wäre eine PDF Vorlage.

Volker

Ganz so einfach mit dem Verstecken der Ränder kann ich es mir leider nicht machen. Das liegt daran, dass hier nur ein sehr einfaches Beispiel ist. Ich habe aber auch Tabellen in der Tabelle, da z.T. mehr als ein Unterricht in einem td angezeigt werden muss. Z.B. für Reli, Wahlphlicht, AG, Teamteaching, ...
Auch die 100% weite kann ich so nicht übernehmen. Sieht z.T. einfach hässlich-leer aus. (Das liegt daran, dass einige Schüler bzw. Lehrer "vollere" Tabellen haben. Die Schriftgröße wird also so angepasst, dass auch die "volle" Tabelle noch "gut" auf dem Ausdruck aussieht. Wenn jetzt aber eine "rechte leere" Tabelle gedruckt wird, dann sieht das sehr "hässlich" aus. Ich kann nicht für jede Tabelle die Schiftgröße individuell anpassen. ...

hmmm... Ich denke ich werde mit diesem kleinen "bug" erstmal leben müssen. Es sind zum Glück im Moment nur ein paar mm.

- - - Aktualisiert - - -

Linux hilft da auch nicht viel. Wer kompiliert denen den dann für die verschiedenen Liux-Versionen immer die verschiedenen Programme, die benötigt werden? Für das Stundenplanungpgrogramm kann ich das jedenfalls zeittechnisch nicht leisten und die meisten Lehrer sind dafür nicht clever genug. Selbst die Mac User (von denen es ja mehr gibt) bekommen es nicht regelmäßig hin. (Sondern machen das mit etwas Glück ein mal pro Jahr.)
Abgesehen davon sind Programmen im Bildungsbereich i.d.R. nur für Windows und nicht mit Linux verfügbar. Klar: Es geht bei einigen geht es mit Wine. Und was ist mit den anderen Programmen? Ersatzlos streichen?
Sprich einfach mal mit Leuten aus dem Schulbereich. So ein Spruch wie "benutze Linux" hilft da nicht viel. An meinem Ort (150.000 Einwohner) hatten bis zum vorletzten Jahr ALLE Schulen ein Unix-System. Jetzt steigen ALLE Schulen um auf Windows, weil es einfach zu viele Probleme gab. (Ja, ich kenne auch Skolelinux und Co., ...)

PDF-Vorlage hilft da auch nicht. Ob ich auf einen Drucker drucke oder als pdf ist programmiertechnisch absolut identisch (bis auf ein Parameter.)

row einer Tabelle verstecken, aber nicht entsprechendes relative td

Tags

Benutzer online in diesem Thema