正如评论中提到的,这
真正地
必须
使用div,这是可以做到的(有权衡)。
技巧是在该标题的容器div中包含标题下的所有单元格或子标题,所有这些单元格或子标题元素都需要显示为内联块。
希望
它可以扩展页面的整个宽度。如果你根本不担心响应布局和/或单元格中溢出的行为,你可以找到它(当然要考虑到边框、边距和填充),并通过CSS进行设置……否则你必须用JS编程设置,并在需要时进行更新。
看看
this Codepen example I made
我找到了一个更好的,甚至可能是理想的解决方案,让你的反应。它使用了总是很棒但经常被遗忘的:弹性盒子!
浏览新代码段(或
Codepen
)阅读我写的评论,看看效果如何。
This article
也是flex box表的良好资源。
/* Tables
================================== */
.table-container {
width: 75%; // Sets table width relative to window width.
margin: 0 auto; // Centers table
}
.Rtable {
display: flex;
flex-wrap: wrap;
margin: 0 0 3em 0;
padding: 0;
width: 100%;
}
.header-row {
text-align: center;
font-size: 1.4em;
}
.header-row h3 {
margin: 0;
}
.table-row {
width: 100%;
display: flex;
}
.Rtable-cell { // This is applied to ALL table cells.
box-sizing: border-box; //This takes borders into account for sizing.
padding: 0.8em 1.2em;
// Depending on cell content, you may need to change
// overflow property, but in some cases, it might break
// the flexbox.
overflow: hidden;
outline: solid 2px gray;
background: lightgray;
}
// These classes mimic the effect of the colspan attribute
// IMPORTANT: The number of columns in your table will determine
// the width percentages to use.
// For instance, for a table with 8 columns at the smallest level,
// a colspan-1 would need to be set to 12.5%, colspan-2 to 25%, and so
on.
.colspan-1 {
width: 25%;
}
.colspan-2 {
width: 50%;
}
.colspan-4 {
width: 100%;
}
/* Page styling - None of this is particular important to the layout of the
table.
================================== */
html {
height: 100%;
background-color: #EEE;
}
body {
box-sizing: border-box;
min-height: 100%;
padding: 2em;
font-family: 'Josefin Sans', sans-serif;
background-color: white;
border: double 3px #DDD;
border-top: none; border-bottom: none;
}
<div class="table-container">
<div class="Rtable">
<!-- Breaking things up into rows is ultimately unnecessary
but if for any reason a cell were to go missing or an intentded
row's cells' widths don't add up to 100%, without splitting into rows, the
flexbox would fill in that gap with whatever cell is next... even if it's on
the next row. -->
<div class="table-row header-row">
<div class="Rtable-cell colspan-4"><h3>I'm at the top level</h3></div>
</div>
<div class="table-row header-row">
<div class="Rtable-cell colspan-2"><h3>I'm a second level header</h3>
</div>
<div class="Rtable-cell colspan-1"><h3>Also second level!</h3></div>
<div class="Rtable-cell colspan-1"><h3>Me too!</h3></div>
</div>
<div class="table-row">
<div class="Rtable-cell colspan-1">Regular cell row 1</div>
<div class="Rtable-cell colspan-1">Regular cell row 1</div>
<div class="Rtable-cell colspan-1">Regular cell row 1</div>
<div class="Rtable-cell colspan-1">Regular cell row 1</div>
</div>
<div class="table-row">
<div class="Rtable-cell colspan-1">Regular cell row 2</div>
<div class="Rtable-cell colspan-1">Regular cell row 2</div>
<div class="Rtable-cell colspan-1">I'M JUST A PLAIN OL' CELL</div>
<div class="Rtable-cell colspan-1">Regular cell row 2</div>
</div>
</div>
</div>
