Search code examples
htmlcsshtml-tablecss-shapes

Add a sphere shapes in corner of Table cells

I have a table for GUI representational purpose. For some cells of the table have a sphere in the corner. the Footer has a plus symbol(font-awesome icon) in the corner. I tried to put the sphere but align only inside the cell.

Target to achieve in figure

My target output

Help me to solve this

.damage-chart{
  border: 3px solid #dddddd;
  width: 80%;

}
.damage-chart td{
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
}

.damage-chart, .damage-chart td{
  border-top: none;
  border-right: none;
}
 <table class="damage-chart">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
   </table>

Solution

  • You can use CSS transformations to position your spheres.

    The 'Plus' signs can be created by a pseudo element ::after with content: '+'; for each cell of the last row.

    In addition, you can use border-collapse: collapse; to avoid gaps between the borders. And try to avoid inline style declarations, you can simply select the last cell of every row with the :last-child selector.

    .damage-chart {
  border: 3px solid #dddddd;
  width: 80%;
  padding: 0;
  margin-top: 20px;
  border-collapse: collapse;
}

.damage-chart td {
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
}
.damage-chart tr td:last-child {
  width: 3%;
}

.damage-chart,
.damage-chart td {
  border-top: none;
  border-right: none;
}

.sphere {
  background: #b11a5a;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-9px, 17px);
 -ms-transform: translate(-9px, 17px); /* IE 9 */
 -webkit-transform: translate(-9px, -17px); /* Safari */
}

.damage-chart tr:last-child td {
  position: relative;
}

.damage-chart tr:last-child td::after {
  content: '+';
  font-family: Arial;
  font-size: 1.5em;
  position: absolute;
  bottom: -16px;
  left: -8px;
}
    <table class="damage-chart">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="sphere"></div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="sphere"></div></td>
    <td></td>
  </tr>
  <tr>
    <td><div class="sphere"></div></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>