如何根据类创建表

Question

我的数据是这样的

＆＃13;

＆＃13;

<div class="fl1">floor 1</div>
<div class="fl2">floor 2</div>
<div class="fl2">floor 2</div>
<div class="fl2">floor 2</div>
<div class="fl3">floor 3</div>

＆＃13;

＆＃13;

＆＃13;

是否可以像这样显示

Answer 1

主要是你必须使用colspan

<table >
        <tr>
            <td colspan="3" style="width:100%">TEXT</td>
        </tr>
        <tr>
            <td  >TEXT</td><td  >TEXT</td><td  >TEXT</td>
        </tr>
       <tr>
            <td colspan="3" style="width:100%">TEXT</td>
        </tr>
    </table>

table，th，td {     边框：1px纯黑色; }

Answer 2

试试这个，使用div和flex。

.cont{
width:200px;
height:100%;
border-style: solid;
}

.f1{
border-style:solid;
 margin: 2px;
}
.fl2{
 
border-style:solid;
width:100%;
margin:2px;
}
.cont2{
  display:flex;
  
}

<div class="cont">
  <div class="f1">floor1</div>
  <div class="cont2">
   <div class="fl2">floor2</div>
    <div class="fl2">floor3</div>
     <div class="fl2">floor4</div>
   </div> 
   <div class="f1">floor5</div>
</div>  

Answer 3

基本上这样：

＆＃13;

＆＃13;

<div style="width:500px;border-style:double">
      <div style="border-style:solid;border-width: 1px;">
        <div>floor 1</div>
      </div> 
      <div style="display:inline-block; padding-top:2px;padding-left:1px">
        <div style="float:left;width:100px;border-width:1px;border-style:solid">floor 2</div>
        <div style="float:left;width:100px;border-width:1px;border-style:solid; margin-left:1px">
        floor 2</div>
        <div style="float:left;width:100px;border-width:1px;border-style:solid; margin-left:1px">floor 2</div>
      </div>
      <div style="border-style:solid;border-width: 1px;">
        <div>floor 1</div>
      </div>  
    </div>

＆＃13;

＆＃13;

＆＃13;