CODEWITHSUNDEEP
csshtml-table
Shira
Shira

Reputation: 424

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?

Upvotes: 2

Views: 4405

Answers (1)

Bro3Simon
Bro3Simon

Reputation: 144

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>

Upvotes: 3

Related Questions