DIV＆CSS如何与Rowspan＆Colspan合作？

问题描述：

我已经研究了几天关于如何使用div来创建表格单元格和合并单元格，其实我可以用TABLE做到这一点，但不能在DIV中做同样的屏幕结果，希望有人能帮助我开发更好的方法或修复代码。DIV＆CSS如何与Rowspan＆Colspan合作？

实际上，我想在全屏模式下使所有单元格的宽度和高度相同（合并区域除外），但问题在于合并单元格在中心。我尝试了很多方法无法使它像TABLE样式一样工作。

这里是我想要的结果，但要符合表：

<style> 
html, body{ 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
table { 
    border-width: 1px 1px 0px 0px; 
    border-spacing:0; 
    margin:0; 
    padding:0; 
    width: 100%; 
    height: 100%; 
} 
td { 
    border-width: 0px 0px 1px 1px; 
} 
table, td { 
    border-style: solid; 
    border-color: purple; 
} 
.w25 { 
    width:25%; 
    height:25%; 
} 
.w50 { 
    width:50%; 
    height:50%; 
} 
.w100 { 
    width:100%; 
    height:100%; 
} 
</style> 
<table class='w100'> 
    <tr> 
     <td class='w25'>D</td> 
     <td class='w25'>E</td> 
     <td class='w25'>F</td> 
     <td class='w25'>G</td> 
    </tr> 
    <tr> 
     <td class='w25'>C</td> 
     <td class='w50' colspan=2 rowspan=2 >MERGED AREA</td> 
     <td class='w25'>H</td> 
    </tr> 
    <tr> 
     <td class='w25'>B</td> 
     <td class='w25'>I</td> 
    </tr> 
    <tr> 
     <td class='w25'>A</td> 
     <td class='w25'>L</td> 
     <td class='w25'>K</td> 
     <td class='w25'>J</td> 
    </tr> 
</table>

这是我目前正在为DIV版本的代码，但没有成功平衡所有的宽度和高度全屏显示。

<style> 
html, body{ 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.table { 
    border-width: 1px 1px 0px 0px; 
} 
.intable { 
    border-width: 0px 1px 0px 0px; 
} 
.table, .intable { 
    display:table; 
    width:100%; 
    height:100%; 
} 
.cell { 
    display:table-cell; 
} 
.row { 
    display:table-row; 
} 
.cell { 
    border-width: 0px 0px 1px 1px; 
    width:25%; 
} 
.table, .intable, .cell { 
    border-style: solid; 
    border-color: purple; 
} 
</style> 
<div class='table'> 
    <div class='row'> 
     <div class='cell' style="max-width:25%;">D</div> 
     <div class='intable'> 
      <div class='cell'>E</div> 
      <div class='cell'>F</div> 
     </div> 
     <div class='cell'>G</div> 
    </div> 
    <div class='row'> 
     <div class='intable'> 
     <div class='row'> 
      <div class='cell'>C</div> 
     </div> 
     <div class='row'> 
      <div class='cell'>B</div> 
     </div> 
     </div> 
     <div class='cell'>Merged Area</div> 
     <div class='intable'> 
     <div class='row'> 
      <div class='cell'>H</div> 
     </div> 
     <div class='row'> 
      <div class='cell'>I</div> 
     </div> 
     </div> 
    </div> 
    <div class='row'> 
     <div class='cell'>A</div> 
     <div class='intable'> 
      <div class='cell'>L</div> 
      <div class='cell'>K</div> 
     </div> 
     <div class='cell'>J</div> 
    </div> 
</div>

Table Version JSFiddle

DIV Version JSFiddle

希望有人可以修复代码！

问题是什么？在使用CSS表格时，例如使用'display：table'等，而不是HTML'table'元素，你似乎在问如何模拟HTML'colspan'和'rowspan'。你试图做到这一点并不明显。但无论如何，答案是你不能：CSS表模型本质上比HTML表模型简单。 –

我会建议去使用'table'结构或使用带有'display：inline-block'属性的'divs'重构。 'display：table'＆'display：table-row'会对你的结构造成破坏。 – nashcheez

谢谢你的建议！ –

答

尝试增加其他类到您的合并列，就像这样：

<div class='cell merged'>Merged Area</div>

，并更改合并区域的CSS，像这样：

.merged{ 
    width:50%; 
    height:50%; 
}

我之所以这样做，是因为你在你的合并区域有同样的班级，但你希望这个大小占用一个正常小区的两倍。所以我所做的只是添加一个额外的类，改变合并区域的宽度和高度以获得所需的结果。

这里是一个更新的小提琴：

https://jsfiddle.net/6hx2uooz/4/

感谢您的回答，它的工作原理与我想要的一样，非常感谢！ –

很酷。没问题！ –

DIV＆CSS如何与Rowspan＆Colspan合作？

相关推荐