Question

我查了一些关于从html表到css的转换的帖子，但是找不到我正在寻找的内容并希望得到一些帮助。

我使用一张桌子作为一些不同尺寸的储物柜的图形演示。结果，一些表格单元跨越多行。当有一些静态模型时，一切都很好。现在我必须处理动态配置和表只是一个痛苦，所以我试图将其转换为CSS。

当单元格跨越多行并且不确定如何设置CSS时，我遇到了一些问题。在尝试动态生成代码之前，我需要查看它是如何静态完成的。

这是一个简短的样本：

<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（尝试），可以获得第一行，但不知道如何做其余的事情：

<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>

还尝试了css“table”，使用其中一个帖子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>

编辑：

这是我需要转换的（样本）表。储物柜的位置和大小将根据型号而变化。如果我能弄清楚一个模型使用CSS会是什么样子，我可以通过它来实现它的动态。括号中的L，M和S表示锁柜大小。中等尺寸小2倍，大尺寸小4倍，售货亭尺寸小6倍。

<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>

感谢。

编辑2：

下图显示了我需要显示的内容（一种变体）。 L：大储物柜，高100 px，M：中等，高50 px; S：小;身高25像素。但是，即使我指定了flex-direction：column，我也似乎无法让锁定器按列显示。

编辑3：

这是我正在使用的CSS和HTML。一旦我向flex-direction添加宽度和高度，它就开始按列显示图像。我想这是一个无证件的要求。但是，现在所有内容都显示在列中。这就是我所拥有的：

.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>

编辑4：

Answer 1

不要使用display：table。这是你在找什么？

编辑：精化

我不认为你正在抓住这个概念..

我会试着向你解释你应该怎么想这个。通常使用表格，你在思考行数，灵活空间可能就是这种情况，当我编写我的解决方案时，我正在考虑列。

请注意我如何使用flex-direction：列在储物柜的孩子上？这个div从顶部到底部横跨整个列。你可以做任何你想做的事，放任何你想要的储物柜，无论大小。

如果你对flexboxes没有任何经验，我建议你阅读它，但下面的解决方案为你提供了一个核心基础。

This tutorial是一个很好的起点。

.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>

将html表行跨度转换为CSS

1 个答案: