我想用纯 CSS 创建一个表格设计。我给 <span>
上了不同的课标签。它们定义单元格的宽度。现在我想插入一行单列(宽度 100%)。但是 <span>
标签不会变成 100%。
请看例子:
<div class="table">
<span class="row head">
<span class="cell w40">
Title
</span>
<span class="cell w20">
Title
</span>
<span class="cell w20">
Title
</span>
<span class="cell w20">
Title
</span>
</span>
<span class="row single"><span class="cell center">Full width?</span></span>
</div>
CSS:
.table {
display: table;
width: 100%;
max-width: 800px;
}
.table .row {
display: table-row;
width: 100%;
}
.table .row.head {
font-weight: 600;
background: #d4291f;
color: white;
}
.table .row.head:hover .cell {
background: #d4291f;
}
.table .row:hover .cell {
background: #eeeeee;
}
.table .row.single .cell {
width: 100%;
display: block;
}
.table .cell {
padding: 8px 8px;
vertical-align: top;
display: table-cell;
}
.table .cell.w40 {
width: 40%;
}
.table .cell.w20 {
width: 20%;
}
.table .cell.center {
text-align: center;
}
你有什么想法吗?
最佳答案
经过一些研究,我相信这是让它发挥作用的方法。 Demo Link
<div class="table">
<span class="row head">
<span class="cell w40">
Title
</span>
<span class="cell w20">
Title
</span>
<span class="cell w20">
Title
</span>
<span class="cell w20">
Title
</span>
</span>
</div>
<div class="table">
<span class="row single">
<span class="cell center">
Full width?
</span>
</span>
</div>
.css 只改变了一点,我删除了“width: 100%;”
.table .row.single .cell {
display: block;
}
关于html - CSS 表格单元格不会变成全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24843773/