css class wird nicht übernommen

[Roica]

Hallo zusammen,

ich entschuldige mich wenn das thema schon zu häufig angesprochen wurde. ich ahbe mit der Suchfunktion allerdings nichts passendes gefunden (wohlbemerkt bei einer oberflächigen suche)

Ich lasse zur Zeit altes "Programmierer wissen" - wenn ich das so nennen kann - wieder aufleben und versuche es zu aktualisieren. Ich habe allerdings immer schon ein Problem mit CSS. Wir werden irgendwie nicht so recht warm mit einandern.

Aktuell habe ich ein Problem mit einer Tabelle. Solange ich die Styles inline in den Tag schreibe klappt alles prima. Wenn ich dann aber die inline Styles durch Klassen ersetzen will die ich in eine CSS Datei nutze dann wird das einfach 0 angenommen. Ich würde das ganze gerne etwas sauberer haben und es deshalb in die css Datei bannen.

hier mal ein Code-Snipped von mir:

          <tr style="height: 100px;">

            <td style="width:10%; border: 1px outset grey; text-align: center;">

             <select style="width:80%; height:30px; text-align:center; font-size:large">

              <option>...</option>

              <option>AZ</option>

              <option>OZ</option>

             </select></td>



            <td style="width:10%; border: 1px outset grey; text-align: center;">

             <select style="width:80%; height:30px; text-align:center; font-size:large">

              <option>...</option>

              <option>TE</option>

              <option>SB</option>

             </select></td>



            <td contenteditable="true" style="width:70%; border: 1px outset grey;"></td>



            <td contenteditable="true" style="width:10%; border: 1px outset grey; text-align: center;"></td>

        </tr>

      

        <!--hier ein versuch das ganze mit css umzusetzen-->


        <tr class="sp_table row">
          <td class="sp_table sign">
           <select style="width:80%; height:30px; text-align:center; font-size:large">
            <option>...</option>
            <option>AZ</option>
            <option>OZ</option>
           </select></td>
          <td class="sp_table who">
           <select style="width:80%; height:30px; text-align:center; font-size:large">
            <option>...</option>
            <option>TE</option>
            <option>SB</option>
           </select></td>
          <td contenteditable="true" class="sp_table action"></td>
          <td contenteditable="true" class="sp_table time"></td>
      </tr>

und dazu die passenden Zeilen aus der CSS

.sp_table{
  width: 98%;
  border-collapse: collapse;
  border-spacing: 0px;
}

.sp_table.row{
  height: 100px;
  font-size: large;
  border: 5px outset black;
}

.sp_table.sign{
  width: 10%;
  border: 1px outset grey;
  text-align: center;
}

.sp_table.who{
  width: 10%;
  border: 1px outset grey;
  text-align: center;
}

.sp_table.action{
  width: 70%;
  border: 1px outset grey;
}

.sp_table.time{
  width: 10%;
  border: 1px outset grey;
  text-align: center;
}

Vielleicht ist es ja was ganz offensichtliches. Ich würde mich freuen wenn mir jemand helfen kann.

Vielen Dank und beste Grüße
Roica

 

[scatello]

Mir stellt sich zuerst mal eine andere Frage: warum überhaupt eine Tabelle? Du hast keine tabellarischen Daten und somit ist eine Tabelle das falsche Element.

Sieh' dir z.B. dies mal an: https://www.w3schools.com/html/html_forms.asp

 

[Roica]

Hey,

Danke erstmal für deine Antwort.

Doch ich habe Daten für die ich eine Tabelle brauche. Die Tabelle wird später mit den Daten dynamisch generiert. Also zumindest die Zeilen. Das passt schon und das ist auch nicht mein Problem.

Ich hab das jetzt erstmal so runter geschrieben um zu sehen wie es aussieht und wie ich es haben will. Das erschien mir schlicht einfacher.

 

[Sempervivum]

Hm, für mich sehen beide Tabellen exakt gleich aus. Was genau klappt denn bei dir nicht?

Ich finde jedoch die Wahl der Klassen unglücklich: sp_table scheint der Name deiner Tabelle zu sein. IMO besser diese Klasse nur dem table-Tag zuweisen <table class="sp_table"> und dann die Elemente darin als Nachfahren ansprechen:
Die Zeilen: .sp_table tr
Die Zellen z. B.: .sp_table .sign, .sp_table .who
Siehe auch hier:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Kombinator

Ich habe allerdings immer schon ein Problem mit CSS. Wir werden irgendwie nicht so recht warm mit einandern.

Das ging mir früher genau so, wahrscheinlich weil ich als Programmierer groß geworden bin und CSS nur eine Auszeichnungssprache ist.

 

[Roica]

Hm, für mich sehen beide Tabellen exakt gleich aus. Was genau klappt denn bei dir nicht?

Ich finde jedoch die Wahl der Klassen unglücklich: sp_table scheint der Name deiner Tabelle zu sein. IMO besser diese Klasse nur dem table-Tag zuweisen <table class="sp_table"> und dann die Elemente darin als Nachfahren ansprechen:
Die Zeilen: sp_table tr
Die Zellen z. B.: sp_table sign, sp_table who
Siehe auch hier:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Selektoren/Kombinator


Das ging mir früher genau so, wahrscheinlich weil ich als Programmierer groß geworden bin und CSS nur eine Auszeichnungssprache ist.

Hallo und danke für die Antwort.

Die Klasse im table Tag ist tatsächlich auch sp_table. Das habe ich hier wohl garnicht rein kopiert. Und die anderen Elemente sollten Nachfahren davon sein. So hatte ich es tatsächlich auch gedacht.

Was nicht geht ist: wenn ich die styles inline verwende werden sie angewendet. Wenn ich die inline styles wegnehme und durch die Klassen ersetze dann wird die Zeile nicht formatiert. Ich verstehe aber irgendwie auch nicht wieso das so ist.


Mir geht es genau so. Ich komme auch eher aus der Programmierer Ecke. Ich denke daher habe ich auch mit dem ganzen anderen Kram weniger Probleme und mir reicht es alles nochmal aufzufrischen. Aber das css ist mir einfach zu oft ein Rätsel... Ich hoffe ich steig irgendwann dahinter und verstehe was ich da falsch mache

Danke schonmal für die Hilfe

Grüße