title: Convert html table row span to CSS
body: <p>I checked some of the posts here regarding conversion from html table to css but can't find what I am looking and hoping for some help.</p>
  
  <p>I am using a table as a graphical presentation of some lockers that have different sizes. As a result, some table cells span multiple rows. All was fine when there were a few static models. Now I have to deal with dynamic configurations and tables are just a pain, so I am trying to convert it to CSS.</p>
  
  <p>I am running into some problems when cell spans multiple rows and not sure how to set up the CSS. I need to see how it is done statically before attempting to generate the code dynamically.</p>
  
  <p>Here is a short sample:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td id="Td7" rowspan="4" height="100"&gt;R0C0&lt;/td&gt;
          &lt;td id="Td8" height="25" &gt;R0C1&lt;/td&gt;
          &lt;td id="Td9" height="25" &gt;R0C2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td10" height="25" &gt;R1C1&lt;/td&gt;
          &lt;td id="Td11" height="25" &gt;R1C2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td12" height="25" &gt;R2C1&lt;/td&gt;
          &lt;td id="Td13" height="25" &gt;R2C2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td14" height="25" &gt;R3C1&lt;/td&gt;
          &lt;td id="Td15" height="25" &gt;R3C2&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>CSS (Attempt), can get the first row but not sure how to do the rest:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;span style="display:inline-block;width:100px;height:100px;border:solid 1px black;vertical-align:top;"&gt;R0C0&lt;/span&gt;
      &lt;span style="display:inline-block;width:100px;height:25px;border:solid 1px black;vertical-align:top;"&gt;R0C1&lt;/span&gt;
      &lt;span style="display:inline-block;width:100px;height:25px;border:solid 1px black;vertical-align:top;"&gt;R0C2&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also tried css "table", using the code in one of the posts <a href="https://stackoverflow.com/questions/29962055/convert-html-table-to-just-css">here</a>:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .css-table {
          display: table;
          background-color:#ccc;
          width: 350px;
      }
  .css-table-tr { 
      display: table-row;     
  }
  
  .css-table-td_small { 
      display: table-cell;
      border:1px solid black;
      width: 100px;
      height:25px;
      display:inline-blok;
      text-align:center;
      vertical-align:top;
  }
  
  .css-table-td_medium { 
      display: table-cell;
      border:1px solid black;
      width: 100px;
      height:50px;
      display:inline-blok;
      text-align:center;
      vertical-align:top;
  }
  
  .css-table-td_large { 
      display: table-cell;
      border:1px solid black;
      width: 100px;
      height:100px;
      display:inline-blok;
      text-align:center;
      vertical-align:top;
  }
  
  .css-table-td_kiosk { 
      display: table-cell;
      border:1px solid black;
      width: 100px;
      height:150px;
      display:inline-blok;
      text-align:center;
      vertical-align:top;
  }
  &lt;/style&gt;
  &lt;div class="css-table"&gt;
      &lt;div class="css-table-tr"&gt;
          &lt;span class="css-table-td_kiosk"&gt;R0C0&lt;/span&gt;
          &lt;span class="css-table-td_small"&gt;R0C1&lt;/span&gt;
          &lt;span class="css-table-td_small"&gt;R0C2&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit:</p>
  
  <p>This is the (sample) table I need I need to convert. The position and size of lockers will change depending on the model. If I can figure out what one model would look like using CSS, I can work it out to make it dynamic. L, M and S in parenthesis imply locker size. Medium is 2 times small, large is 4 times small and Kiosk is 6 times small locker size.</p>
  
  <pre><code>&lt;table border="1" style="width:600px"&gt;
      &lt;tr&gt;
          &lt;td id="Td1" height="100" &gt;K01D04 (L)&lt;/td&gt;
          &lt;td id="Td2" height="100" &gt;C02D08 (L)&lt;/td&gt;
          &lt;td id="Td3" height="100" &gt;C03D08 (L)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td4" height="25" &gt;K01D03 (S)&lt;/td&gt;
          &lt;td id="Td5" height="25" &gt;C02D07 (S)&lt;/td&gt;
          &lt;td id="Td6" height="25" &gt;C03D07 (S)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td7" rowspan="5" height="150" class="kPL_Kiosk"&gt;KIOSK&lt;/td&gt;
          &lt;td id="Td8" height="25" &gt;C02D06 (S)&lt;/td&gt;
          &lt;td id="Td9" height="25" &gt;C03D06(S)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td10" height="25" &gt;C02D05 (S)&lt;/td&gt;
          &lt;td id="Td11" height="25" &gt;C03D05 (S)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td12" height="25" &gt;C02D04 (S)&lt;/td&gt;
          &lt;td id="Td13" height="25" &gt;C03D04 (S)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td14" height="25" &gt;C02D03 (S)&lt;/td&gt;
          &lt;td id="Td15" height="25" &gt;C03D03 (S)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td16" height="50" &gt;C02D02 (M)&lt;/td&gt;
          &lt;td id="Td17" height="50" &gt;C03D02 (M)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td18" height="50" &gt;K01D02 (M)&lt;/td&gt;
          &lt;td id="Td19" rowspan="2" height="100" &gt;C02D01 (L)&lt;/td&gt;
          &lt;td id="Td20" rowspan="2" height="100" &gt;C03D01 (L)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="Td21" height="50"&gt;K01D01 (M)&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Thanks.</p>
  
  <p>Edit 2:</p>
  
  <p>The image below shows what I need to display (one variation). L: large locker, height 100 px, M: medium, height 50 px; S: small; height 25 px. However, I do not seem to be able to get the lockers to display column-wise even though I specify flex-direction: column.</p>
  
  <p><a href="https://i.stack.imgur.com/Vvob3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vvob3.png" alt="Locker System Sample"></a></p>
  
  <p>Edit 3:</p>
  
  <p>This is the CSS and HTML I am using. Once I added width and height to flex-direction, it started to display the images column-wise. I guess this is an undocumented requirement. However, now everything is displayed in column. This is what I have:</p>
  
  <pre><code>.lockers {
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap:wrap;
      flex-wrap:wrap;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      align-items: flex-start;
  }
  
  .locker-column {
      display: flex;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-flex-wrap:wrap;
      flex-wrap:wrap;
      -webkit-align-items: flex-start;
      align-items: flex-start;
      height:420px;
      width:100px;
  }
  img {
      display: flex;
      max-width: 100px;
      height: auto;
      -webkit-flex-grow:1;
      flex-grow:1;
    }
  
  &lt;div class="lockers"&gt;
      &lt;div class="locker-column"&gt;
          &lt;img src="..\assets\images\Lockers\L.png" title="R1C1-L" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R2C1-S" /&gt;
          &lt;img src="..\assets\images\Lockers\Kiosk.png" title="Kiosk" /&gt;
          &lt;img src="..\assets\images\Lockers\M.png" title="R4C1-M" /&gt;
          &lt;img src="..\assets\images\Lockers\M.png" title="R5C1-M" /&gt;
      &lt;/div&gt;
      &lt;div class="locker-column"&gt; 
          &lt;img src="..\assets\images\Lockers\L.png" title="R1C2-L" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R2C2-S" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R2C3-S" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R2C4-S" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R2C5-S" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R2C6-S" /&gt;
          &lt;img src="..\assets\images\Lockers\M.png" title="R2C7-M" /&gt;
          &lt;img src="..\assets\images\Lockers\L.png" title="R2C8-L" /&gt;
      &lt;/div&gt;
      &lt;div class="locker-column"&gt;
          &lt;img src="..\assets\images\Lockers\L.png" title="R1C3-L" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R2C3-S" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R3C3-S" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R4C3-S" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R5C3-S" /&gt;
          &lt;img src="..\assets\images\Lockers\S.png" title="R6C3-S" /&gt;
          &lt;img src="..\assets\images\Lockers\M.png" title="R7C3-M" /&gt;
          &lt;img src="..\assets\images\Lockers\L.png" title="R8C3-L" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit 4:</p>
  
  <p><a href="https://i.stack.imgur.com/IDRNF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IDRNF.png" alt="enter image description here"></a></p>