how do i color a part of a cell in an html table?

mahfoudlemine
April 29, 2023
308 views
1 vote
2 Answers

How do I draw the green shape in the picture knowing that I have made attempts, but the table in the html does not allow me to form shapes in the cell

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>

Tags: css html

Answers

Note:

This answer uses the (relatively) new :has() relational pseudo-class in the selectors. Make sure it is supported well enough by your target browsers.

Alternatively, select explicitly named classes for the individual segments (e.g. .pill-shape, .start-shape, .mid-shape, .end-shape).

The shape can be split into the following segments:

(For single-column shapes: Presumably a single pill-shaped segment.)
The rounded start.
The continous middle.
The rounded end.

The :has() relational pseudo-class) can select elements based on its following elements (i.e. next siblings and children). The + adjacent sibling combinator can select elements based on its immediately preceding sibling element.

This means, by using the :has() pseudo-class and the + combinator we can find out what shape (segment) a table cell <td> should contain.

Example:

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>

After finding selectors that match our expectations, we can style the segments.

Example (which styles ::before pseudo-elements for the segments):

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>

There’s already a best answer.

But if you needing an static css, i’ll leave you this scratch just in case.

.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>

Please signup or login to give your own answer.

Click here to cancel reply.