barha barha - 2 months ago 11
CSS Question

CSS Triangle under <td> element in a table

I am trying to add CSS triangle under table element, to make something like
arrow under td
how can I put that triangle like floating above the second

tr
and not changing the
td
height, example for my problem:



td {
padding: 10px;
}
.arrow-down {
position: relative;
top: 25px;
right: 0;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #000;
}

<table border="1">
<tr>
<td>
(1)
</td>
<td>
(2)<br><br>
</td>
<td>
(3)
<div class="arrow-down">
</div>
</td>
<td>
(4)
</td>
</tr>
<tr>
<td colspan="4">
bla bla
</td>
</tr>
</table>




Answer

you can use the pseudo element ::after in the td

td {
  padding: 10px;
  position:relative
}
tr:first-of-type td:nth-of-type(3)::after {
  content:"";
  position: absolute;
  bottom: -20px;
  right: 5px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #000;
}
<table border="1">
  <tr>
    <td>
      (1)
    </td>
    <td>
      (2)
      <br /><br />
    </td>
    <td>
      (3)
    </td>
    <td>
      (4)
    </td>
  </tr>
  <tr>
    <td colspan="4">
      bla bla
    </td>
  </tr>
</table>