0

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>
Brian Tompsett - 汤莱恩
  • 5,195
  • 62
  • 50
  • 120
Anand Jose
  • 508
  • 4
  • 25

3 Answers3

1

Using position: relative and position: absolute could solve your problem. Try this code.

<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><span class="sphere"></span></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><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td style="width: 3%"></td>
      </tr>
   </table>

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

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

.damage-chart, .damage-chart td{
  border-top: none;
  border-right: none;
}
.sphere {
  background-color: red;
  position: absolute;
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  right: -7px;
  top: -7px;
  z-index: 2;
}
.plus {
  position: absolute;
  font-weight: bold;
  display: block;
  right: -8px;
  bottom: -10px;
  z-index: 2;
}
Aryan Twanju
  • 2,374
  • 1
  • 7
  • 11
1

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>
andreas
  • 14,688
  • 11
  • 61
  • 62
1

Tables have an intricate and delicate mechanism that help it quickly update all columns to same width/height across columns and rows. Well, not that quickly, to be exact, but still: it's there.

The result of this feature is that the table component elements (<thead>, <tbody>, <tfoot>, <tr>, <td>, <th>, <col>, <colgroup> and <caption>) have different implementations in different browsers and you can't rely on block level properties to work on them reliably. For example, position:relative doesn't work on <tr> elements (and there are many other "exceptions" like this one).

Rather than remembering what does and what does not work on which table elements it is recommended (and safer) to use block level elements inside your table cells to position your dots: 

td {
  position: relative;
  padding: 1rem;
  border: 1px solid #ddd;
}

red-ball {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: -8px;
  left: -8px;
  border-radius: 8px;
  background-color: #900;
}
table {
  width: calc(100% - 2rem);
  border-collapse:collapse;
  margin: 1rem;
}
<table class="damage-chart" >
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td>
      <red-ball></red-ball>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
</table>
tao
  • 59,850
  • 12
  • 84
  • 110