DIV & CSS 如何与 Rowspan 和 Colspan 一起使用?
How DIV & CSS work with Rowspan & Colspan?
我研究了几天如何使用 div 创建 table 单元格和合并单元格,实际上我可以用 TABLE 做到这一点,但不能这样做屏幕结果 DIV,希望有人能帮助我找到更好的方法或修复代码。
实际上,我想在全屏模式下使所有单元格的宽度和高度相同(合并区域除外),但问题是合并单元格位于中心。我尝试了很多方法都无法使它像 TABLE 样式那样工作。
这是我想要的结果,但是 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>
希望有人可以修复代码!
尝试向合并的列中添加另一个 class,如下所示:
<div class='cell merged'>Merged Area</div>
并更改合并区域的css,如下所示:
.merged{
width:50%;
height:50%;
}
我这样做的原因是因为您在合并区域上有相同的 class,但您希望其大小占普通单元格 space 的两倍。所以我所做的就是添加一个额外的 class 更改合并区域的宽度和高度以获得所需的结果。
这是更新后的 Fiddle:
我研究了几天如何使用 div 创建 table 单元格和合并单元格,实际上我可以用 TABLE 做到这一点,但不能这样做屏幕结果 DIV,希望有人能帮助我找到更好的方法或修复代码。
实际上,我想在全屏模式下使所有单元格的宽度和高度相同(合并区域除外),但问题是合并单元格位于中心。我尝试了很多方法都无法使它像 TABLE 样式那样工作。
这是我想要的结果,但是 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>
希望有人可以修复代码!
尝试向合并的列中添加另一个 class,如下所示:
<div class='cell merged'>Merged Area</div>
并更改合并区域的css,如下所示:
.merged{
width:50%;
height:50%;
}
我这样做的原因是因为您在合并区域上有相同的 class,但您希望其大小占普通单元格 space 的两倍。所以我所做的就是添加一个额外的 class 更改合并区域的宽度和高度以获得所需的结果。
这是更新后的 Fiddle: