[ia] Nils: HTML/CSS Tabelle - Umbruch Problem

Hallo,

ich habe ein Problem mit einem Bild in einer Tabelle. Die Tabelle wurde aus <div>-Elementen gebaut, da dies Vorgabe ist - daran ist nichts zu ändern. Mein Problem ist, dass in das Bild in der ersten Zelle einen Umbruch in der zweiten Zelle verursacht.

<a href='#' class='table-row'>  
    <span class='table-cell'><img src='bild.png'></span>  
    <span class='table-cell'>TEXT ABOUT SOMETHING</span>  
    <span class='table-cell'>18.11.2012 02:14</span>  
    <span class='table-cell'>19.11.2012 08:14</span>  
    <span class='table-cell'>2h 38m 2s</span>	  
</a>  

  
  
.myTable a {  
  display: table-row;  
}  
  
.myTable a span {  
  display: table-cell;  
  padding: 20px; /* this line not really needed */  
}  

Ich möchte, dass der Inhalt einer jeder Zelle auf einer Linie bleibt. Mir ist bisher keine Lösung eingefallen.

Gruß

  1. Mahlzeit,

    Die Tabelle wurde aus <div>-Elementen gebaut, da dies Vorgabe ist

    Wieso änderst du es dann nach span?

    • daran ist nichts zu ändern.

    Hausaufgabe? Wenn sowas in der Schule/Uni gelehrt wird, armes Deutschland.

    Mein Problem ist, dass in das Bild in der ersten Zelle einen Umbruch in der zweiten Zelle verursacht.

    Dann stelle bitte ein Beispiel online zur Verfügung, nur wenige haben Lust, den Code auszuprobieren. JSFiddle oder Dabblet helfen dabei.

    --
    42
  2. Om nah hoo pez nyeetz, [ia] Nils!

    ich habe ein Problem mit einem Bild in einer Tabelle. Die Tabelle wurde aus <div>-Elementen gebaut, da dies Vorgabe ist - daran ist nichts zu ändern. Mein Problem ist, dass in das Bild in der ersten Zelle einen Umbruch in der zweiten Zelle verursacht.

    Ich möchte, dass der Inhalt einer jeder Zelle auf einer Linie bleibt. Mir ist bisher keine Lösung eingefallen.

    Interessierende Eigenschaften könnten vertical-align und white-space sein.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wand und Wanderung.

  3. Du hast wahrscheinlich so lange daran rumgebastelt, dass du mit deinen Klassenbezeichnern ganz durcheinander gekommen bist. Probiers mal so:

      
    .table-row {  
      display: table-row;  
    }  
      
    .table-cell {  
      display: table-cell;  
      padding: 20px; /* this line not really needed */  
    }