我怎么画的绿色形状在图片中知道我已经作出了尝试,但在html的表格不允许我形成的形状在细胞
Here the output I want to achieve.
able{
font-family: arial, sans-sarif;
width: 90%;
border-collapse: collapse;
margin: 50px;
}
td,th{
border: 1px solid #ddd;
padding: 10px;
}
/* tr:nth-child(even){
background-color: #ddd;
} */
th{
background-color: #ddd;
}
.cent{
background: blue;
color: aqua;
width: 100%;
height: 100%;
}
<table>
<tr>
<th>Janvier</th>
<th>Fevrier</th>
<th>Mars</th>
<th>Avril</th>
<th>Mai</th>
<th>Juin</th>
</tr>
<tr>
<td>cc</td>
<td><span class="cent">cc</span></td>
<td style="min-width: 2em; background-color: RGB(0, 240, 0)">
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
2条答案
按热度按时间fnx2tebb1#
已经有最佳答案了。
但是如果你需要一个静态的css,我会给你留下这个草稿以防万一。
h43kikqp2#
备注:
这个答案在选择器中使用了(相对)新的
:has()
relational pseudo-class。确保it is supported在目标浏览器上足够好。或者,为各个段选择显式命名的类(例如:例如
.pill-shape
、.start-shape
、.mid-shape
、.end-shape
)。形状可以拆分为以下几个部分:
:has()
relational pseudo-class)可以基于其以下元素(即即下一个兄弟姐妹和孩子)。+
adjacent sibling combinator可以根据其前一个兄弟元素选择元素。这意味着,通过使用
:has()
伪类和+
组合子,我们可以找出表格单元格<td>
应该包含什么形状(段)。示例:
在找到符合我们期望的选择器之后,我们可以对片段进行样式化。
示例(为线段设置
::before
pseudo-elements样式):