Вертикальный Выравнивание текста в ячейке таблицы с заполнением

Question

У меня есть таблица с ячейками, у которых верхнее и нижнее дополнение 10px. Я хотел бы вертикально выровнять текст в этих ячейках снизу, что не будет работать с применяемым правилом заполнения. Какие-либо предложения?

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

HTML код:

<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 код

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; 
} 

Answer 1

раствор вместо padding вы можете установить height в 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>