我正在尝试使用 HTML/CSS 为现代浏览器复制此设计:
它本质上是一个包含行和列的表格,这意味着如果一行的名称单元格变大,那么所有行的名称单元格都应该变大。我看到两种可能性:表格和 CSS 网格。
据我所知,表格中的行的样式不够,例如它们不能采用边框半径,我还没有尝试过盒子阴影。
如果我使用 CSS 网格,我可以设置单元格的样式以模拟末尾的边框半径,但随后框阴影变得不可能,因为第二个单元格的框阴影覆盖了第一个单元格。
我认为问题归结为具有代表样式的行的元素,但仍在每个元素内部,单元格的宽度应与其他行中的宽度相同,以代表列。
CSS 有什么办法可以实现这一点吗?
例如,这里尝试使用 HTML 来做到这一点table
其中边距和边框半径不起作用:
table {
border-collapse: collapse;
}
tr {
background-color: grey;
border-radius: 8px;
margin: 10px;
}
<table>
<tr>
<td>Eva Lee</td>
<td>Call back</td>
<td>15/02/19</td>
</tr>
<tr>
<td>Evelyn Allen</td>
<td>Call back</td>
<td>14/01/19</td>
</tr>
<tr>
<td>Slawomir Pelikan</td>
<td>Voicemail</td>
<td>14/01/19</td>
</tr>
<tr>
<td>Christopher Walken</td>
<td>Voicemail</td>
<td>14/01/19</td>
</tr>
</table>
这是另一个尝试,使用display: table
,其作用与table
:
.table {
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
background-color: grey;
border-radius: 8px;
margin: 10px;
}
.cell {
display: table-cell;
}
<div class="table">
<div class="row">
<div class="cell">Eva Lee</div>
<div class="cell">Call back</div>
<div class="cell">15/02/19</div>
</div>
<div class="row">
<div class="cell">Evelyn Allen</div>
<div class="cell">Call back</div>
<div class="cell">14/01/19</div>
</div>
<div class="row">
<div class="cell">Slawomir Pelikan</div>
<div class="cell">Voicemail</div>
<div class="cell">14/01/19</div>
</div>
<div class="row">
<div class="cell">Christopher Walken</div>
<div class="cell">Voicemail</div>
<div class="cell">14/01/19</div>
</div>
</div>
Edit 1
这适用于 FF、Chrome、MSIE、MS Edge。
边缘可能需要一些调整,因为表格单元格具有子像素宽度,如果现在给出像素宽度,则会导致烦人的垂直条。
这是通过使用负边距来实现的div
s 包裹单元格内容并且overflow: hidden
在细胞上。
table {
border-collapse: collapse;
border-spacing: 0;
}
table tr td {
overflow: hidden;
padding: 0 0 5px 0;
}
table tr td > div {
background-color: gold;
padding: 4px;
border-radius: 0px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
margin-left: -10px;
margin-right: -10px;
padding-left: 14px;
padding-right: 14px;
}
table tr td:first-child {
padding-left: 10px;
}
table tr td:first-child > div {
border-radius: 10px 0 0 10px;
}
table tr td:last-child {
padding-right: 20px;
}
table tr td:last-child > div {
border-radius: 0 10px 10px 0;
}
<table>
<tr>
<td>
<div>Lorem.</div>
</td>
<td>
<div>Ea!</div>
</td>
<td>
<div>Animi.</div>
</td>
</tr>
<tr>
<td>
<div>Quas!</div>
</td>
<td>
<div>Dolor!</div>
</td>
<td>
<div>Suscipit.</div>
</td>
</tr>
<tr>
<td>
<div>Mollitia?</div>
</td>
<td>
<div>Inventore!</div>
</td>
<td>
<div>Dolorem.</div>
</td>
</tr>
</table>
旧的,不能在 Chrome 中运行
来点伪元素魔法怎么样?
table {
border-spacing: 10px;
border-collapse: separate;
}
tr {
position: relative;
margin: 10px;
}
tr:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gold;
z-index: -1;
border-radius: 20px;
box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.25);
}
td {
padding: 10px;
}
<table>
<tr>
<td>Eva Lee</td>
<td>Call back</td>
<td>15/02/19</td>
</tr>
<tr>
<td>Evelyn Allen</td>
<td>Call back</td>
<td>14/01/19</td>
</tr>
<tr>
<td>Slawomir Pelikan</td>
<td>Voicemail</td>
<td>14/01/19</td>
</tr>
<tr>
<td>Christopher Walken</td>
<td>Voicemail</td>
<td>14/01/19</td>
</tr>
</table>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)