CODEWITHSUNDEEP
htmlcss
noclist
noclist

Reputation: 1819

Vertical Align text in a table cell with padding

I have a table with cells that have top and bottom padding of 10px. I would like to vertically align the text in these cells to the bottom, which won't work with the padding rule applied. Any suggestions?

Fiddle: http://jsfiddle.net/t520n0z4/1/

HTML Code:

<table>
  <tr>
    <td class="paddedCell">Name</td> <!--text should be aligned to the bottom here -->
    <td class="cell">Address</td>
  </tr>
  <tr>
    <td class="paddedCell">Email</td> <!-- text should be aligned to the bottom here -->
    <td class="cell">Phone</td>
  </tr>
</table>

CSS Code

table {
  border: 1px solid #000;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #000;
}

.paddedCell {
  padding: 10px 0;
  vertical-align: bottom;
  border-right: 1px solid #000;
}

.cell {
  vertical-align: bottom;
}

Upvotes: 1

Views: 2820

Answers (1)

Alex Char
Alex Char

Reputation: 33218

A solution instead of using padding you can set height to tr:

table {
  border: 1px solid #000;
  border-collapse: collapse;
}
tr {
  height: 40px;/*add height*/
  border-bottom: 1px solid #000;
}
.paddedCell {
  /*padding: 10px 0; remove padding */
  vertical-align: bottom;
  border-right: 1px solid #000;
}
.cell {
  vertical-align: bottom;
}
<table>
  <tr>
    <td class="paddedCell">Name</td>
    <td class="cell">Address</td>
  </tr>
  <tr>
    <td class="paddedCell">Email</td>
    <td class="cell">Phone</td>
  </tr>
</table>

Upvotes: 1

Related Questions