Html 尝试用一些div替换表标记

我试图使集合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显示在一个新行中

我在这里检查了一些答案，但似乎它们都取决于每行中有相同数量的div

---

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

为什么要避免使用？是否显示表数据？或者只是转换布局？平板电脑数据在

中很好，不要像我说的“尝试”那样做更多的工作，让它工作起来毫无意义地困难，我正在尝试更好的控制，因此，我将它们用作容器，而不仅仅是一个表数据，实际上我曾经使用过

，但我在设置它的样式时遇到了一些问题如果问题是设置样式，那么当您将div与

display:table

而不是实际的表一起使用时，您将遇到完全相同的问题。不管怎样，您已经遇到了结构错误：行中的所有表列是怎么回事？你想要达到什么样的布局？你能提供你想要的东西的截图吗？