- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我研究了几天如何使用 div 创建表格单元格和合并单元格,实际上我可以用 TABLE 做到这一点,但不能在 DIV 中做同样的屏幕结果,希望有人能帮助我更好地插入我方法或修复代码。
实际上,我想在全屏模式下使所有单元格的宽度和高度相同(合并区域除外),但问题是中心的合并单元格。我尝试了很多方法都无法使它像 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>
希望有人能修复代码!
最佳答案
尝试向合并列中添加另一个类,如下所示:
<div class='cell merged'>Merged Area</div>
并更改合并区域的 css,如下所示:
.merged{
width:50%;
height:50%;
}
我这样做的原因是因为您在合并区域上有相同的类,但您希望大小占用普通单元格空间的两倍。所以我所做的就是添加一个额外的类来更改合并区域的宽度和高度以获得所需的结果。
这是一个更新的 fiddle :
关于html - DIV 和 CSS 如何与 Rowspan 和 Colspan 一起工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42438338/
根据我对 JavaScript 的理解,任何属性都可以使用 element.attribute = newValue 设置。因此,我尝试使用 element.colspan = 2 设置多个表格单元格
地点ID: 3 我想使用 JQuery 将第一个 TR 中未包含在完整页面中的第一个 Colspan="2"替换为 Colspan="4"。 谢谢。 最诚挚的问候,女士 最佳答案 这个 jQuery
您好,我有一个表,其中一行中的某些列与 colspan="2" 属性相关联。 此刻它看起来像这样: 我希望一行中连接的列的文本居中,但只有连接列中的文本 该行的表格数据(无限制)有如下代码 u
我是否可以检查现有表中的列数并将其分配给该表 colspan 的顶部? My code document.write('') document.write(' HEAD GRID ') for(i
我有一个表格,其中的单元格具有相同的值。我正在尝试使用 colspan 将它们合并在一起,但是为 colspan 设置属性没有任何效果。 https://jsfiddle.net/afn4f1q9/4
我已经使用了这个 .js 文件和以下方法。 https://code.jquery.com/jquery-3.3.1.js https://cdn.datatables.net/1.10.19/js/
我有一个响应式表格(在可变 div 宽度内设置为 100% 宽度),我试图在其中“重置”colspan,以便下一个表格行不会继承固定宽度 tds. 在我的示例中,数字 td(1 到 7)的固定宽度为
我的问题是,当我单击“span cell 1”按钮时,colspan 已正确完成,但头部 td 被扩展,并且随着表大小的增加,表布局受到干扰。它不能管理剩余的列吗? 如果我单击跨度单元格 1 按钮,则
这是第一个问题,所以请原谅我的任何错误。 我正在使用 JQuery Datatables 插件,并且必须向表中添加两行带有 colspan 的列标题。在 HTML 中硬编码没有问题,但现在我在表初始化
我使用的是响应式数据表并且工作正常,但问题出在 colspan 上。 当我使用带有 colspan 属性的 td 标签时,页面使用此链接引发错误 datatables warning table id
我正在使用以下 HTML 代码制作日历: Mon Tue Wed T
我有一张带有 colspan 的表,但表现不佳。 请比较以下 fiddle : http://jsfiddle.net/lucaswiener/WBdc8/ http://jsfiddle.net/l
jsfiddle 链接:http://jsfiddle.net/KMzjp/ 所以我试图根据表头 th 元素突出显示表列(有三个 th 元素,所以应该有三列,中间一列突出显示). 它在没有 colsp
我有一个包含很多行和列的表格。 现在我想像这样将 td "E8"分成两列: 什么是最好的解决方案? 最佳答案 单向: 您可以在同一行的所有其他单元格上使用 rowspan="2" 例子:
请看下面的html: Event Name City Date Price
我正在尝试使用 colspan 使图像与表格中的右侧对齐,并使带有文本的行在左侧对齐。当图像在左侧时,此方法通常有效,但现在我希望它在右侧,但它不起作用。请记住这是针对 outlook 电子邮件的,因
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
帮助!我在这里拔头发。我正在尝试 a) 在此表的第一行和第三行中执行 colspan,但它似乎不起作用。我希望两行都跨越三列,并且 b) 我无法显示图像并且我已经在网上进行了广泛的搜索并且已经解决了我
我正在创建一个应用程序,它允许用户通过添加和删除列和行、设置列宽和单元格列跨度以及将元素插入表格单元格来操作表格结构。在测试时,我遇到了一个场景,其中 Firefox 4 和 Internet Exp
表名:主题 我的预期输出 我的代码 setActiveSheetIndex(0); $headers = array('School Name'); $objPHPExcel->get
我是一名优秀的程序员,十分优秀!