Search code examples
htmlcelloverlap

How to have a cell above another


Is it possible to marge two cells and to keep the text, in order to have a text above another?

 <tr>           
   <td colspan="1" style="font-family: 'Chivo', sans-serif;;
       font-size: 300px;
       font-weight: 900;
       letter-spacing: 6px;
       padding-left: 20px;">
       30 
                        
   </td>
   <td style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       font-size: 20px;
       font-weight: 900;">
       %
   </td>
   <td style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       font-size: 30px;
       font-weight: 900;
       letter-spacing: 4px;
       text-transform: uppercase;
       padding-top: 20px">
       FF
   </td>
</tr>


Solution

  • Using CSS Layout:

    .number {
      font-size:80px;
    }
    
    .percent {
      position: relative;
      left: -30px;
    }
    
    .letter {
      position: relative;
      left: -20px;
    }
    <table><tr>
        <td class="number">30</td>
        <td class="percent">%</td>
        <td class="letter">FF</td>
    </tr></table>