我在div中有多个跨距,包装器显示为表格,跨度显示为表格单元格.现在我想在跨度上方显示一个标题,而不必再嵌套跨度.这是我有的:
.wrap { width: 300px; display: table; } .header { display: table-header-group; } .first { display: table-cell; background: red; padding: 10px; } .second { display: table-cell; background: green; padding: 10px; } .third { display: table-cell; background: blue; padding: 10px; }
<div class="wrap"> <span class="header">Header</span> <span class="first">First</span> <span class="second">Second</span> <span class="third">Third</span> </div>
https://jsfiddle.net/kn8b20p3/
如果您检查“标题”,它似乎填满整个100%宽度,但如果有更多文本或背景颜色,它只会扩展到第一列.
有没有办法让它覆盖所有三列,如真正的标题,而不进一步嵌套跨度?
解决方法
如果你真的想使用表的属性来代替你的
.header { display: table-header-group; }
使用
.header { display: table-caption; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。