css 我如何颜色的一部分，一个单元格在一个html表格？

3vpjnl9f 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(133)

我怎么画的绿色形状在图片中知道我已经作出了尝试，但在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>

css

来源：https://stackoverflow.com/questions/76134109/how-do-i-color-a-part-of-a-cell-in-an-html-table

2条答案

按热度按时间

fnx2tebb1#

已经有最佳答案了。
但是如果你需要一个静态的css，我会给你留下这个草稿以防万一。

.janvier{
  height:35px;
  width: 50%;
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(156, 209, 0);
}
.fevrier{
  height:35px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: rgb(156, 209, 0);
}
.mars{
  height:35px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: rgb(156, 209, 0);
}
.avril{
  height:35px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: rgb(156, 209, 0);
}
.mai{
  height:35px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: rgb(156, 209, 0);
}
.juin{
  height:35px;
  width: 98%;
  float: left;
  margin-top: 15px;
  margin-bottom: 15px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: rgb(156, 209, 0);
}

table{
  font-family: arial, sans-sarif;
  border-collapse: collapse;
  table-layout: auto;
  margin: 50px;
  width: 90%;
  
}
th{
    border: 1px solid #ddd;
    background-color: #ddd;
    padding: 10px;
}
td{
  border: 1px solid #ddd;
}

<table>
  <tr>
    <th>Janvier</th>
    <th>Fevrier</th>
    <th>Mars</th>
    <th>Avril</th>
    <th>Mai</th>
    <th>Juin</th>
  </tr>
  <tr>
    <td><div class="janvier"></div></td>
    <td><div class="fevrier"></div></td>
    <td><div class="mars"></div></td>
    <td><div class="avril"></div></td>
    <td><div class="mai"></div></td>
    <td><div class="juin"></div></td>
  </tr>
</table>

赞(0）回复(0）举报 2023-05-02

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>应该包含什么形状（段）。
示例：

td.shape:first-child:last-child::before, /*Single child*/
td.shape:first-child:has(+td:not(.shape))::before, /*First child*/
td:not(.shape)+td.shape:last-child::before, /*Last child*/
td:not(.shape)+td.shape:has(+td:not(.shape))::before /*Non-consecutive shape*/
{
  content: "Pill";
}

td.shape:first-child:has(+td.shape)::before, /*First child*/
td:not(.shape)+td.shape:has(+td.shape)::before /*Non-first child*/
{
  content: "Start";
}

td.shape+td.shape:last-child::before, /*Last child*/
td.shape+td.shape:has(+td:not(.shape))::before /*Non-last child*/
{
  content: "End";
}

td.shape+td.shape:has(+td.shape)::before {
  content: "Middle";
}

/*Ignore; table styles*/
table {border-collapse: collapse}
th, td {border: 1px solid lightgray}
th {
  padding: .4rem;
  background-color: whitesmoke;
}

<table>
  <thead>
    <tr>
      <th>Janvier</th>
      <th>Fevrier</th>
      <th>Mars</th>
      <th>Avril</th>
      <th>Mai</th>
      <th>Juin</th>
      <th>Juillet</th>
      <th>Aout</th>
      <th>Septembre</th>
      <th>Octobre</th>
      <th>Novembre</th>
      <th>Decembre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="shape"></td>
      <td></td>
      <td class="shape"></td>
      <td class="shape"></td>
      <td></td>
      <td class="shape"></td>
      <td class="shape"></td>
      <td class="shape"></td>
      <td></td>
      <td class="shape"></td>
      <td></td>
      <td class="shape"></td>
    </tr>
  </tbody>
</table>

在找到符合我们期望的选择器之后，我们可以对片段进行样式化。
示例（为线段设置::before pseudo-elements样式）：

td.shape {
  --size: 1.2rem;
  position: relative;
  padding: .4rem;
  min-width: var(--size);
  height: var(--size);
  
}
td.shape::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: var(--size);
  height: var(--size);
  transform: translateY(-50%);
  display: inline-block;
  background-color: green;
}

/*Pill-shape*/
td.shape:first-child:last-child::before,
td.shape:first-child:has(+td:not(.shape))::before,
td:not(.shape)+td.shape:last-child::before,
td:not(.shape)+td.shape:has(+td:not(.shape))::before {
  border-radius: 9999rem;
  width: 50%;
  transform: translate(50%, -50%);
}

/*Start segment*/
td.shape:first-child:has(+td.shape)::before,
td:not(.shape)+td.shape:has(+td.shape)::before {
  right: 0;
  border-top-left-radius: 9999rem;
  border-bottom-left-radius: 9999rem;
  width: calc(var(--size) * 0.5 + 50%);
}

/*End segment*/
td.shape+td.shape:last-child::before,
td.shape+td.shape:has(+td:not(.shape))::before {
  left: 0;
  border-top-right-radius: 9999rem;
  border-bottom-right-radius: 9999rem;
  width: calc(var(--size) * 0.5 + 50%);
}

/*Middle segment*/
td.shape+td.shape:has(+td.shape)::before {
  left: 0;
  width: 100%;
}

/*Ignore; table styles*/
table {border-collapse: collapse}
th, td {border: 1px solid lightgray}
th {
  padding: .4rem;
  background-color: whitesmoke;
}

<table>
  <thead>
    <tr>
      <th>Janvier</th>
      <th>Fevrier</th>
      <th>Mars</th>
      <th>Avril</th>
      <th>Mai</th>
      <th>Juin</th>
      <th>Juillet</th>
      <th>Aout</th>
      <th>Septembre</th>
      <th>Octobre</th>
      <th>Novembre</th>
      <th>Decembre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="shape"></td>
      <td></td>
      <td class="shape"></td>
      <td class="shape"></td>
      <td></td>
      <td class="shape"></td>
      <td class="shape"></td>
      <td class="shape"></td>
      <td></td>
      <td class="shape"></td>
      <td></td>
      <td class="shape"></td>
    </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2023-05-02

我来回答

css 我如何颜色的一部分，一个单元格在一个html表格？

2条答案

相关问题

热门标签

最新问答