Search code examples
csshtml-tablehtml-email

How to center this table cell inside a row?


How could I center the single cell inside a tr, is there a property that I'm not aware of perhaps? So, I would like that single cell to be centered no matter how many cells will be added above or below, if that's possible..? This is in the context of an email template.

td {
  border: 1px solid blue;
  padding: 50px;  
}

.center {
  padding: 0;
}
<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td class="center">center me please</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


Solution

  • just add align="center" to the table which you want to make center

    td {
      border: 1px solid blue;
      padding: 50px;  
    }
    
    .center {
      padding: 0;
    }
    <table id="main">
      <tr>
        <td>
          <table>
            <tr>
              <td></td>
              <td></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table align="center">
            <tr>
              <td class="center">center me please</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table>
            <tr>
              <td></td>
              <td></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>