barha barha - 1 month ago 6
CSS Question

CSS triangle under table row element

I am trying to add "CSS Triangle" under the first table row at the center, like the next picture:

enter image description here

I tried to do it with ::after the first row as shown in previous examples but the positioning wasn't correct.

Here is the table without the triangle



table {
width: 100%;
}

td {
border: 1px solid black;
}

td.content {
height: 100px;
}

<table>
<tr class="header">
<td> # </td>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td colspan="3" class="content"> content </td>
</tr>
</table>




Answer

You may need to do the after on the td element rather than the row. Here's one method, which is demonstrated below.

https://css-tricks.com/snippets/css/css-triangle/

table {
    width: 100%;
}

td {
   border: 1px solid black;
}

td.content {
  height: 100px;
}

.red-triangle:after {
  content: '';
  position: absolute;
  top: 33px;
  left: 45%;
  width: 0px;
  height: 0;
  border-top: solid 25px red;
  border-left: solid 25px transparent;
  border-right: solid 25px transparent;
}
<table>
    <tr class="header">
        <td> # </td>
        <td class="red-triangle"> 1 </td>
        <td> 2 </td>
    </tr>
    <tr>
        <td colspan="3" class="content"> content </td>
    </tr>
</table>

Comments