display table: colspan?

[deBennie]

Ik ben een responsive winkelmandje aan het opzetten.
Het winkelmandje bestaat enkel uit DIV's die ik op display table, table-row en table-cell zet.
Omdat het winkelmandje bij kleinere schermen een andere view moet krijgen kan ik helaas geen gewone table toepassen.

In het winkelmandje heeft elk product een productregel. Elke productregel bestaat uit meerdere kolommen (bv omschrijving, prijs, aantal, verwijderen).
Elke productregel heeft een bottom border.

Nu moet er bij elke productregel een stukje tekst kunnen worden geplaatst: een toelichting.
(Een product kan bv een ticket zijn en een dergelijk product moet een kleine toelichting krijgen.)
De tekst moet zo breed zijn als de breedte van de productregel.

Het probleem is dat als ik een nieuwe productregel opzet en daar 1 DIV in plaats, die DIV breedte van de 1e DIV van de productregel erboven krijgt. Logisch natuurlijk: ik zet het geheel op als display:table, table-row en table-cell.

Bij normale tables kun je dan een colspan toepassen.
Maar bij table's opgezet via CSS kan dit -zo lijkt het- niet.

Een stukje HTML

code:

<div id="winkelmand">
  <div class="productregel">
    <div class="kolom1"></div>
    <div class="kolom2"></div>
    <div class="kolom3"></div>
    <div class="kolom4"></div>
    <div class="kolom"5></div>
  </div>
  <div class="productregel">
    <div class="toelichting">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum pellentesque viverra. Sed ornare dapibus dignissim</div>
  </div>
</div>

De less:

code:

#winkelmand{
  display:table;
  width:100%;

  .productregel{
    display:table-row;
      >div{
        display:table-cell;
        width:20%;
        border-bottom:solid 1px #ccc;
      }
      >div.toelichting{
        ???
      }
   }
}

Een oplossing zou zijn de toelichting-DIV absoluut te positioneren, echter als m'n scherm kleiner wordt, dan wrapt de tekst over meerdere regels. Bij absolute positionering kan ik de hoogte niet stellen.

Hoe kan ik dit oplossen, iemand een idee?

[Spinal]

Als dit tabulaire data is (wat het lijkt te zijn), waarom gebruik je dan niet gewoon een tabel?

[deBennie]

Als je mn verhaal hebt gelezen, weet je waarom

[deBennie]

Ah, ik heb een oplossing. Als volgt:

code:

<div id="winkelmand">
  <div class="table-view">
    <div class="productregel">
      <div class="kolom1"></div>
      <div class="kolom2"></div>
      <div class="kolom3"></div>
      <div class="kolom4"></div>
      <div class="kolom5"></div>
    </div>
  </div>
  <div class="table-view">
    <div class="productregel">
      <div class="fullwidth toelichting">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum pellentesque viverra. Sed ornare dapibus dignissim</div>
    </div>
  </div>
  <div class="table-view">
    <div class="productregel">
      <div class="kolom1"></div>
      <div class="kolom2"></div>
      <div class="kolom3"></div>
      <div class="kolom4"></div>
      <div class="kolom4"></div>
    </div>
  </div>
  <div class="table-view">
    <div class="productregel">
      <div class="fullwidth toelichting">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum pellentesque viverra. Sed ornare dapibus dignissim</div>
    </div>
  </div>
</div>

En de bijbehorende less:

code:

#winkelmand{
  .table-view{
    width:100%;
    display:table;    
    table-layout: fixed;
    
    .productregel{
      display:table-row;
  
      >div{
        width:20%;
      }
      >div.fullwidth{
        width:100%;
      }
      >div.toelichting{
        color:#ccc;
      }
    }
  }
}

Dus blijkbaar moet ik elke regel binnen de winkelmand opzetten alszijnde een display:table en daarbinnen de row en cellen defineren.
De 'table-layout: fixed;' is hierbij blijkbaar noodzakelijk om de 'cellen' verticaal onderling correct uit te lijnen.

Hiermee fixed dus

[_Thanatos_]

deBennie schreef op donderdag 30 oktober 2014 @ 11:10:
Als je mn verhaal hebt gelezen, weet je waarom

Je kunt elementen uit een table "gewoon" op display:block/inline zetten en dan ermee omgaan alsof het divs of iets anders waren...

[deBennie]

_Thanatos_ schreef op vrijdag 31 oktober 2014 @ 20:59:
[...]

Je kunt elementen uit een table "gewoon" op display:block/inline zetten en dan ermee omgaan alsof het divs of iets anders waren...

Inderdaad, je hebt helemaal gelijk!