html - 尝试用一些 div 替换表格标签

Question

我正在尝试将集合 div 制作成表格，所以这是我的样式表文件:

.maindiv {
display:table;
}
.divheader {
    display:table-row;
    width:100%;
    height:10%;
}
.divfooter {
     width:100%;
    height:20%;
}
.middlediv {
    display:table-row;
    width:100%;
    height:70%;
}
.divinheader {
    display:table-column;
    width:10%;
    height:80%;
}
.divinfooter {
    width:100%;
    height:50%;
}
.leftofmiddle {
     display:table-column;
    width:20%;
    height:100%;
}
.rightofmiddle {
     display:table-column;
    width:20%;
    height:100%;
}
.middleofmiddle {
     display:table-column;
    width:60%;
    height:100%;
}
.divinleftofmiddle {
     display:table-cell;
    width:100%;
    height:40%;
}  

这是我的 html 标签:

 <div class="maindiv">
  <div class="divheader">
        <div class="divinheader"></div> 
        <div class="divinheader"></div>
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
    </div>
    <div class="middlediv">
        <div class="leftofmiddle">
            <div class="divinleftofmiddle"></div>
            <div class="divinleftofmiddle"></div>
        </div>
<div class="middleofmiddle">

</div>
        <div class="rightofmiddle"></div>
        </div>
    <div class="divfooter">
        <div class="divinfooter"></div>
        <div class="divinfooter"></div>
    </div>
        </div>  

但它看起来不像表格，只是每个 div 出现在一个新行中

I've checked some answers here but seems they all depending on there are the same number of divs in each row

Answer 1

最好使用表结构，可以创建样式，试试吧。