Convert html table row span to CSS - html

Question

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.
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.
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.
Here is a short sample:
<table>
<tr>
<td id="Td7" rowspan="4" height="100">R0C0</td>
<td id="Td8" height="25" >R0C1</td>
<td id="Td9" height="25" >R0C2</td>
</tr>
<tr>
<td id="Td10" height="25" >R1C1</td>
<td id="Td11" height="25" >R1C2</td>
</tr>
<tr>
<td id="Td12" height="25" >R2C1</td>
<td id="Td13" height="25" >R2C2</td>
</tr>
<tr>
<td id="Td14" height="25" >R3C1</td>
<td id="Td15" height="25" >R3C2</td>
</tr>
</table>
CSS (Attempt), can get the first row but not sure how to do the rest:
<div>
<span style="display:inline-block;width:100px;height:100px;border:solid 1px black;vertical-align:top;">R0C0</span>
<span style="display:inline-block;width:100px;height:25px;border:solid 1px black;vertical-align:top;">R0C1</span>
<span style="display:inline-block;width:100px;height:25px;border:solid 1px black;vertical-align:top;">R0C2</span>
</div>
Also tried css "table", using the code in one of the posts here:
<style type="text/css">
.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;
}
</style>
<div class="css-table">
<div class="css-table-tr">
<span class="css-table-td_kiosk">R0C0</span>
<span class="css-table-td_small">R0C1</span>
<span class="css-table-td_small">R0C2</span>
</div>
</div>
Edit:
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.
<table border="1" style="width:600px">
<tr>
<td id="Td1" height="100" >K01D04 (L)</td>
<td id="Td2" height="100" >C02D08 (L)</td>
<td id="Td3" height="100" >C03D08 (L)</td>
</tr>
<tr>
<td id="Td4" height="25" >K01D03 (S)</td>
<td id="Td5" height="25" >C02D07 (S)</td>
<td id="Td6" height="25" >C03D07 (S)</td>
</tr>
<tr>
<td id="Td7" rowspan="5" height="150" class="kPL_Kiosk">KIOSK</td>
<td id="Td8" height="25" >C02D06 (S)</td>
<td id="Td9" height="25" >C03D06(S)</td>
</tr>
<tr>
<td id="Td10" height="25" >C02D05 (S)</td>
<td id="Td11" height="25" >C03D05 (S)</td>
</tr>
<tr>
<td id="Td12" height="25" >C02D04 (S)</td>
<td id="Td13" height="25" >C03D04 (S)</td>
</tr>
<tr>
<td id="Td14" height="25" >C02D03 (S)</td>
<td id="Td15" height="25" >C03D03 (S)</td>
</tr>
<tr>
<td id="Td16" height="50" >C02D02 (M)</td>
<td id="Td17" height="50" >C03D02 (M)</td>
</tr>
<tr>
<td id="Td18" height="50" >K01D02 (M)</td>
<td id="Td19" rowspan="2" height="100" >C02D01 (L)</td>
<td id="Td20" rowspan="2" height="100" >C03D01 (L)</td>
</tr>
<tr>
<td id="Td21" height="50">K01D01 (M)</td>
</tr>
</table>
Thanks.
Edit 2:
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.
Edit 3:
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:
.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;
}
<div class="lockers">
<div class="locker-column">
<img src="..\assets\images\Lockers\L.png" title="R1C1-L" />
<img src="..\assets\images\Lockers\S.png" title="R2C1-S" />
<img src="..\assets\images\Lockers\Kiosk.png" title="Kiosk" />
<img src="..\assets\images\Lockers\M.png" title="R4C1-M" />
<img src="..\assets\images\Lockers\M.png" title="R5C1-M" />
</div>
<div class="locker-column">
<img src="..\assets\images\Lockers\L.png" title="R1C2-L" />
<img src="..\assets\images\Lockers\S.png" title="R2C2-S" />
<img src="..\assets\images\Lockers\S.png" title="R2C3-S" />
<img src="..\assets\images\Lockers\S.png" title="R2C4-S" />
<img src="..\assets\images\Lockers\S.png" title="R2C5-S" />
<img src="..\assets\images\Lockers\S.png" title="R2C6-S" />
<img src="..\assets\images\Lockers\M.png" title="R2C7-M" />
<img src="..\assets\images\Lockers\L.png" title="R2C8-L" />
</div>
<div class="locker-column">
<img src="..\assets\images\Lockers\L.png" title="R1C3-L" />
<img src="..\assets\images\Lockers\S.png" title="R2C3-S" />
<img src="..\assets\images\Lockers\S.png" title="R3C3-S" />
<img src="..\assets\images\Lockers\S.png" title="R4C3-S" />
<img src="..\assets\images\Lockers\S.png" title="R5C3-S" />
<img src="..\assets\images\Lockers\S.png" title="R6C3-S" />
<img src="..\assets\images\Lockers\M.png" title="R7C3-M" />
<img src="..\assets\images\Lockers\L.png" title="R8C3-L" />
</div>
</div>
Edit 4:

Answer 1

Don't use display: table. Is this what you're looking for?
Edit: Elaboration
I don't think you're grasping the concept..
I'll try to explain to you how you should be thinking about this. Usually with tables, you're thinking in terms of rows, where that might be the case with flexboxes, when I wrote my solution I was thinking about it in terms of columns.
Notice how I have flex-direction: column on the children of lockers? This div literally spans the entire column, from top to bottom. You can do whatever you want, put whatever lockers you want, of whatever size.
If you have absolutely no experience with flexboxes I recommend you read up on it, but the solution below gives you a core foundation to what you are trying to do.
This tutorial is a good starting point.
.lockers {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.locker-column {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100px;
}
.locker {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
text-decoration: underline;
font-weight: 600;
text-transform: uppercase;
margin: 2px 0;
height: 100%;
}
.large {
background-color: yellow;
color: red;
height: 100px;
}
.small {
background-color: navy;
color: white;
height: 25px;
}
.medium {
background-color: green;
color: red;
height: 50px;
}
.kiosk {
color: red;
text-decoration: none;
text-transform: lowercase;
height: 150px;
}
<div class="lockers">
<div class="locker-column">
<div class="large locker">L11</div>
<div class="small locker">S21</div>
<div class="kiosk locker">Kiosk</div>
<div class="medium locker">M81</div>
<div class="medium locker">M91</div>
</div>
<div class="locker-column">
<div class="large locker">L12</div>
<div class="small locker">S22</div>
<div class="small locker">S32</div>
<div class="small locker">S42</div>
<div class="small locker">S52</div>
<div class="small locker">S62</div>
<div class="medium locker">M72</div>
<div class="large locker">M82</div>
</div>
<div class="locker-column">
<div class="large locker">L13</div>
<div class="small locker">S23</div>
<div class="small locker">S33</div>
<div class="small locker">S43</div>
<div class="small locker">S53</div>
<div class="small locker">S63</div>
<div class="medium locker">M73</div>
<div class="large locker">M83</div>
</div>
</div>