Search code examples
csshtml-table

How do I vertically align my text in a table header to the bottom?

I have a series of tables that lays on a top table and this is the basic structure:

<table>
   <tr>
      <td>
         <table>
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
              </tr>
            <thead>
         <table>
         <table>
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
              </tr>
            <thead>
         <table>
      </td>
   </tr>
</table>

I want all tables to be the same height so all tables have a width property. But when the data fills the tables th sometimes the title contain two words and I want to break it: "TITLE TITLE" But once I do it, the other 1-word titles are getting bottom padding and it looks far from the bottom of the th cell enter image description here

Is there any way to make all 1-word titles closer to the bottom of the cell?

Solution

  • It can be solved with the CSS property vertical-align set to bottom.

    Like this:

    .align-bottom {
   vertical-align: bottom
}
    <th class="align-bottom"></th>