- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试创建一个表格,其中第一列的长度是其余两列的两倍。当我将 colspan=2
应用于表格时,它什么也不做
实际代码
原始代码如下
<div class="datagrid">
<table>';
<thead><tr><th colspan="2">header</th><th>header</th><th>header</th></tr></thead>
<tfoot><tr><td colspan="4"><div id="no-paging"> </div></tr></tfoot>
<tbody>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
<tr><td colspan="2">data</td><td>data</td><td>data</td></tr>
</tbody>
</table>
</div>
CSS
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #5492A2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 10px 0px;
}
.datagrid table thead th {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #288096), color-stop(1, #288096) );
background:-moz-linear-gradient( center top, #288096 5%, #288096 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#288096', endColorstr='#288096');
background-color:#288096;
color:#FFFFFF;
font-size: 18px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table tbody td {
color: #D4D2D2;
border-left: 1px solid #D4D2D2;
font-size: 16px;
border-bottom: 1px solid #E1EEF4;
font-weight: normal;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #5492A2;
background: #FFFFFF;
}
.datagrid table tfoot td {
padding: 0;
font-size: 18px
}
.datagrid table tfoot td div {
padding: 0px;
}
最佳答案
它确实有效。但由于它们都是 colspan
ing,所以您无法分辨。
这是我的 fiddle ,向您展示 colspan
正在工作(tbody
中的第一行我设置为 4 列,没有跨度)。如果你想实现前 2 个跨越的“外观”,你可以像我在 Fiddle 中那样调整宽度 (50%/25%/25%)
关于html - CSS 表中的 colspan 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18117522/
根据我对 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
我是一名优秀的程序员,十分优秀!