我想创建一个具有以下外观的表:
起初看起来很容易,但实际上并非如此:
以下是您可以用来测试的基础fiddle。它包含表的基本标记+样式。没有异常表格单元格和悬停效果的一切。
我使用:before
中的td
伪元素创建蓝色背景,使用:after
创建0.5
不透明度图片{{1}混合模式。
我通过multiply
偏移每个表格单元格中的背景图像。第一个单元格具有background-position
偏移量,第二个单元格具有0
,第三个单元格具有100%
等。它们无缝对齐。
我分叉了上面的小提琴,试图让它在视觉上正确。我几乎成功了。这是result。但是有一些问题:
200%
元素中的:after
伪元素创建了悬停效果。但是,这需要我使元素具有tr
显示(因为具有显示block
的元素显然不具有伪元素)。这意味着如果单元格没有table-row
或者它们只有更多内容,则所有列都将不对齐,并且表格看起来不像表格。可以在小提琴中看到。min-width
中为每个表格单元格的背景使用基于百分比的偏移量,所以单个单元格稍大或稍小会破坏背景图像的对齐,因为该百分比基于元素本身而不是之前的元素。在小提琴中,你可以清楚地看到背景图像只是被打碎了。显然,你可以很容易地用4个元素彼此相邻,也可以用一些JavaScript来处理悬停效果。 但是,是否可以在保留语义正确的表格标记的同时创建此布局? I.E.使用background-position
元素。
您可以随意使用this fiddle进行测试。
答案 0 :(得分:1)
我按原样保留了布局,我只添加了一个包装器
另一方面,特殊弹出列仅使用pseduo元素。这样,我可以调整到顶部,但不能调整到底部。这就是为什么需要容器,以削减伪的底部。
底部的阴影需要稍微调整,否则我认为结果还可以。
.container {
margin: 20px;
overflow: hidden;
}
table {
margin: 10px 10px 20px 10px;
background: #F0F6F7;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
border-radius: 5px;
border-collapse: collapse;
}
tr:hover td {
background: rgba(255, 0, 0, 0.2);
}
tr + tr td, tr + tr td.pop:before {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
tr:first-child .pop:after, tr:first-child .pop:before {
top: -10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
tr:last-child .pop:after, tr:last-child .pop:before {
}
td {
min-width: 150px;
box-sizing: border-box;
padding: 16px 10px 15px 10px;
color: #787878;
font-family: Roboto, sans-serif;
font-size: 16px;
text-align: center;
}
td + td {
border-left: 1px solid rgba(0, 0, 0, 0.05);
}
td.pop {
position: relative;
z-index: 0;
color: #FFF;
}
td.pop, td.pop + td {
border-left: none;
}
tr:first-child td.pop:after {
content: '';
position: absolute;
top: -10px;
right: 0;
left: 0;
z-index: -2;
background: url('https://i.imgur.com/lcKmrnE.jpg') #539BFC;
background-blend-mode: screen;
opacity: 0.75;
height: 1000%;
}
tr:last-child td.pop:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
z-index: -1;
height: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 2px 2px 2px 0px lightgray, 0px 10px 0px 10px white;
}

<div class="container">
<table>
<tbody>
<tr><td>Josh</td><td class="pop">3 BTC</td><td>$46,343</td><td>27/12/17</td></tr>
<tr><td>Anne</td><td class="pop">2 BTC (veeery big cell)</td><td>$38,452</td><td>26/12/17</td></tr>
<tr><td>Jack</td><td class="pop">6 BTC<br><small>bigger</small></td><td>$126,989</td><td>26/12/17</td></tr>
<tr><td>Gyumur</td><td class="pop">0.7 BTC</td><td>$14,104</td><td>24/12/17</td></tr>
<tr><td>Boggy</td><td class="pop">12 BTC</td><td>$267,766</td><td>21/12/17</td></tr>
</tbody>
</table>
</div>
&#13;