我需要将表格分成两部分,但我想保留标题的 display:table-cell 宽度。 这是我的代码狙击:
<div class="table" style="margin-bottom:0">
<div class="row header">
<div class="cell sorting sort" data-sort="name">Name</div>
<div class="cell sorting sort" data-sort="age">Age</div>
<div class="cell sorting sorting_desc">Occupation</div>
<div class="cell">Location</div>
</div>
</div>
<div class="table list">
<div class="row">
<div class="cell name" data-title="Name">Luke Peters</div>
<div class="cell age" data-title="Age">25</div>
<div class="cell" data-title="Occupation">Freelance Web Developer</div>
<div class="cell" data-title="Location">Brookline, MA</div>
</div>
...
对于脚本,我需要一个地方来放置数据。这里是 div.list 但它破坏了我的标题布局,然后它具有不同的宽度。有没有办法让标题单元格的宽度等于列表单元格?
这是一个代码笔:codepen.io
答案 0 :(得分:1)
因为您使用的是两个单独的表。您可以将第二个表放入第一个表中,并将 .list
设置为 display: contents
以进行桌面视图。
body {
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
background: #2b2b2b;
}
@media screen and (max-width: 580px) {
body {
font-size: 16px;
line-height: 22px;
}
}
.wrapper {
margin: 0 auto;
padding: 40px;
max-width: 800px;
}
.table {
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
}
.table.list {
display: contents;
}
@media screen and (max-width: 580px) {
.table {
display: block;
}
}
.row {
display: table-row;
background: #f6f6f6;
}
.row:nth-of-type(odd) {
background: #e9e9e9;
}
.row.header {
font-weight: 900;
color: #ffffff;
background: #ea6153;
}
.row.green {
background: #27ae60;
}
.row.blue {
background: #2980b9;
}
@media screen and (max-width: 580px) {
.row {
padding: 14px 0 7px;
display: block;
}
.row.header {
padding: 0;
height: 6px;
}
.row.header .cell {
display: none;
}
.row .cell {
margin-bottom: 10px;
}
.row .cell:before {
margin-bottom: 3px;
content: attr(data-title);
min-width: 98px;
font-size: 10px;
line-height: 10px;
font-weight: bold;
text-transform: uppercase;
color: #969696;
display: block;
}
}
.cell {
padding: 6px 12px;
display: table-cell;
position: relative;
}
@media screen and (max-width: 580px) {
.cell {
padding: 2px 16px;
display: block;
}
}
.cell {
border: 1px solid;
}
<div class="wrapper">
<div id=test>
<div class="table" style="margin-bottom:0">
<div class="row header">
<div class="cell sorting sort" data-sort="name">
Name
</div>
<div class="cell sorting sort" data-sort="age">
Age
</div>
<div class="cell sorting sorting_desc">
Occupation
</div>
<div class="cell">
Location
</div>
</div>
<div class="table list">
<div class="row">
<div class="cell name" data-title="Name">
Luke Peters
</div>
<div class="cell age" data-title="Age">
25
</div>
<div class="cell" data-title="Occupation">
Freelance Web Developer
</div>
<div class="cell" data-title="Location">
Brookline, MA
</div>
</div>
<div class="row">
<div class="cell name" data-title="Name">
Joseph Smith
</div>
<div class="cell age" data-title="Age">
27
</div>
<div class="cell" data-title="Occupation">
Project Manager
</div>
<div class="cell" data-title="Location">
Somerville, MA
</div>
</div>
<div class="row">
<div class="cell name" data-title="Name">
Maxwell Johnson
</div>
<div class="cell age" data-title="Age">
26
</div>
<div class="cell" data-title="Occupation">
UX Architect & Designer
</div>
<div class="cell" data-title="Location">
Arlington, MA
</div>
</div>
<div class="row">
<div class="cell name" data-title="Name">
Harry Harrison
</div>
<div class="cell age" data-title="Age">
25
</div>
<div class="cell" data-title="Occupation">
Front-End Developer
</div>
<div class="cell" data-title="Location">
Boston, MA
</div>
</div>
</div>
</div>
</div>
<!-- !test -->
</div>