i checked of posts here regarding conversion html table css can't find looking , hoping help.
i using table graphical presentation of lockers have different sizes. result, table cells span multiple rows. fine when there few static models. have deal dynamic configurations , tables pain, trying convert css.
i running problems when cell spans multiple rows , not sure how set css. need see how done statically before attempting generate code dynamically.
here 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 first row not sure how 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 code in 1 of 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 (sample) table need need convert. position , size of lockers change depending on model. if can figure out 1 model using css, can work out make dynamic. l, m , s in parenthesis imply locker size. medium 2 times small, large 4 times small , kiosk 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 need display (one variation). l: large locker, height 100 px, m: medium, height 50 px; s: small; height 25 px. however, not seem able lockers display column-wise though specify flex-direction: column.
edit 3:
this css , html using. once added width , height flex-direction, started display images column-wise. guess undocumented requirement. however, displayed in column. 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:
don't use display: table. you're looking for?
edit: elaboration
i don't think you're grasping concept..
i'll try explain how should thinking this. tables, you're thinking in terms of rows, might case flexboxes, when wrote solution thinking in terms of columns.
notice how have flex-direction: column on children of lockers? div literally spans entire column, top bottom. can whatever want, put whatever lockers want, of whatever size.
if have absolutely no experience flexboxes recommend read on it, solution below gives core foundation trying do.
this tutorial 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>
Comments
Post a Comment