- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个简单的表,我试图在上面添加 colgroup
和 col
但它们不可见。它也部分破坏了表格的响应能力。
在移动版中,红色列是可见的,但它们是错误的。
这是表格
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
<table>
<caption>Statement Summary</caption>
<colgroup>
<col span="2" style="background-color:red; text-align: center;">
<col style="background-color:yellow">
</colgroup>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
</tr>
</tbody>
</table>
这是 Jsfiddle,您可以在其中查看响应能力:https://jsfiddle.net/d5yfteck/
如何使用 colgroup
和 col
?
最佳答案
这一行:
table tr {
background-color: #f8f8f8;
}
正在覆盖 colgroup
定义。
没有那一行你的代码工作正常: your code with colgroup
更新:
如果你想在手机上实现同样的效果,在您的移动布局中,列显示为行,因此一种解决方案是在媒体标签 (.red
.yellow
) 中使用类,另请参阅 tbody
应设置为其他颜色。
关于html - Colgroup 和 Col 在桌面上不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56082724/
我想确定网页上的任何 html 表是否存在标签。如果它不存在,我想在 html 中插入 colgroup 标签。我已经在 javascript 中得到了表对象,但我没有找到任何方法来解决这个问题。请帮
我有以下 colgroup 无法正常工作。 请看这个jsfiddle .我在 colgroup 上的样式不起作用。 最佳答案 您可以在 colgroup 上设置的大多数属性都不会产生影响,因为根据定
这与这个问题有点相反 Why does firebug add to ?最终可能会得到相同的答案,但我想确认一下。 我的代码中有一个 colgroup,当我使用 Firebug 或 IE 调试工具时
我尝试使用 colgroup 为表格的每一列提供宽度,但它不起作用。示例代码在这里
我编写了一个 jQuery 插件,除其他外,它使用 colgroup 设置表格列的宽度,并允许通过向左或向右拖动标题来调整它们的大小。我发布了它的精简版本 here 。它在 Firefox 中工作正常
我有下面一组元素,我想找到 组数。 我要三组我尝试了以下不起作用的东西 对。 /(.*?)/g 最佳答案 /(.*?)/g 这里
我试图用边框分隔一组列,但我很难让页眉和页脚没有边框。 这是一个 fiddle 示例: http://jsfiddle.net/cgVHz/1/ 如您所见,表格的两个标题也有边框,这不是我要找的。 我
简单(我希望),HTML 问题。 假设我有一个横跨 3 列的列组。但它也跨越 9 行。但实际上,我希望有 3 级列(所以基本上是 3 列,分为 9 行)。真正的唯一目标是: a) 避免嵌入表格(出于各
我想通过 colgroup 定义列的宽度。此外,tbody 应该是可滚动的。但这是行不通的。有没有不用js的解决方案? js fiddle HTML
我正在使用 colgroup 标签来为我的 html 表格中的列设置样式。但是,使用 border-radius、-webkit-border-radius 和 -moz-border-radius
我有一个表格,第 2 列到第 7 列是隐藏的,而其他列则通过 colgroup 方法分配了宽度百分比。无论出于何种原因,width 百分比都会被忽略。但是,如果我“取消隐藏”第 2-7 列,则会考虑该
这个问题在这里已经有了答案: using text-align center in colgroup (4 个答案) 关闭 9 年前。 这个 XHTML 1.1 有什么问题:
使用 colgroup 设置表格单元格的宽度在 IE9 中不起作用
我想在表格的每一列上使用不同的样式。我读过你可以通过使用 来做到这一点或 ,但我没有运气。我有一个例子 here ,似乎什么都没有改变。难道我做错了什么?这适用于 xhtml 吗? 我知道我可以在
我的页面中有一个表格,我使用 colgroups 以相同的方式格式化此列中的所有单元格,适用于背景颜色和所有内容。但似乎无法弄清楚为什么文本对齐中心不起作用。它不会使文本居中。 例子:
有人可以建议为什么列没有根据它们在 colgroup 中的 %s 调整大小吗? 问题:让第一列占 50%,第二列和第三列占 25%。同时在 tbody 上保留显示 block ,这样我们就可以在 bo
我正在尝试创建一个数据表,我在其中几乎没有遇到样式问题。 1) 我正在尝试将交替行应用于未触发的 TR。 有没有办法在不将类传递给所有 TD 的情况下应用交替样式 在每个 TR..? 2) Colgr
我有一个简单的表,我试图在上面添加 colgroup 和 col 但它们不可见。它也部分破坏了表格的响应能力。 在移动版中,红色列是可见的,但它们是错误的。 这是表格 table { border
我有一个表格,在 colgroup 中有一个 col,背景颜色为灰色。 我有一个背景颜色为橙色的 tr 1
是否可以在 cols 或 colgroups 上添加 jQuery 鼠标事件。我们曾尝试这样做,但似乎没有效果。另一方面,这些列有一个真实的宽度和高度。有没有办法让这些事件与 col 一起工作? 最佳
我是一名优秀的程序员,十分优秀!