how can I align images to top of the row? - html

Question

I am trying to align the images to the top of the row in this table:
<table class="customers">
<thead>
<tr>
<th class="first">
How can I get the images aligned to the top of the row?
</th>
<th class="second"></th>
<th class="third"></th>
<th class="fourth ng-binding">Mary</th>
<th ng-class="persons.length>1 ? 'fifth' : (persons.length<2 ? 'fifth_single' : '') " class="ng-binding fifth">
</th>
</tr>
</thead>
<tbody>
<tr ng-class="'odd'" class="odd border_bottom">
<td>
<table class="docInfo">
<tbody>
<tr>
<td rowspan="2" ng-show="showDocInfo(1,strategy.statuses[0].reason)" ng-click="showTextArea(1)"
class="ng-hide"><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-transparent-glass-icons-business/076004-3d-transparent-glass-icon-business-document4.png" alt="docimage"></td>
<td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-binding ng-hide">Mary</td>
</tr>
<tr>
<td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-hide"><span><p
class="ng-binding">Mar
4, 2015 2:42:25 PM</p></span></td>
</tr>
</tbody>
</table>
<table class="docInfo">
<tbody>
<tr>
<td rowspan="2" ng-show="showDocInfo(1,strategy.statuses[0].reason)" ng-click="showTextArea(1)"
class="ng-hide"><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-transparent-glass-icons-business/076004-3d-transparent-glass-icon-business-document4.png" alt="docimage"></td>
<td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-binding ng-hide">Mary</td>
</tr>
<tr>
<td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-hide"><span><p
class="ng-binding">Mar
4, 2015 2:42:25 PM</p></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr ng-class="'odd'" class="odd borderbottom">
<td>
<table class="docInfo">
<tbody>
<tr>
<td rowspan="2" ng-show="showDocInfo(1,strategy.statuses[0].reason)" ng-click="showTextArea(1)"
class="ng-hide"><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-transparent-glass-icons-business/076004-3d-transparent-glass-icon-business-document4.png" alt="docimage"></td>
<td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-binding ng-hide">Mary</td>
</tr>
<tr>
<td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-hide"><span><p
class="ng-binding">Mar
4, 2015 2:42:25 PM</p></span></td>
</tr>
</tbody>
</table>
<table class="docInfo">
<tbody>
<tr>
<td rowspan="2" ng-show="showDocInfo(1,strategy.statuses[0].reason)" ng-click="showTextArea(1)"
class="ng-hide"><img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-transparent-glass-icons-business/076004-3d-transparent-glass-icon-business-document4.png" alt="docimage"></td>
<td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-binding ng-hide">Mary</td>
</tr>
<tr>
<td ng-show="showDocInfo(1,strategy.statuses[0].reason)" class="ng-hide"><span><p
class="ng-binding">Mar
4, 2015 2:42:25 PM</p></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr ng-class="'even'" class="even">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr ng-class="'odd'" class="odd">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr ng-class="'even'" class="even">
<td></td>
<td></td>
<td></td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
At the moment the images are sort of in the middle of each row. How can I get them aligned to the top of the row? I tried to set the verticalalign property but did not fix it.
Here is the stylesheet:
.customers
{
table-layout: fixed;
border: in 2px;
float: left;
}
img
{
height:30px;}
.customers tr.border_bottom > td {
border-bottom:1pt solid black;
}
.customers td {
margin: 0 5px;
padding: 10px 8px;
line-height: 1.4;
vertical-align: middle;
}
td {
vertical-align: top;
}
.customers .first {
width: 40%;
}
.customers .first_single {
width: 39%;
}
.customers .second {
width: 20%;
}
.customers .third {
width: 20%;
}
.customers .fourth {
width: 20%;
}
.customers .fifth{
width: 20%;
}
.customers .fifth_single{
width: 1%;
}
tr.odd>td,tr.even>td{
width:100%;
}
.docInfo {
table-layout: fixed;
float: left;
}
.docInfo td {
margin: 0 5px;
padding: 0px 5px;
line-height: 0.2;
font-size: 10px;
vertical-align: top;
font-family: Arial;
font-weight: bold;
}
.first {
width: 40%;
}
.second {
width: 60%
}
img {
background: transparent;
height: 25px;
}
}
Also created a plunkr url:http://plnkr.co/edit/CssSPt?p=preview

Answer 1

I think your problem is the
line-height: 0.2;
style that is applied to the .docInfo td
It is not a large enough line-height for the text and so is causing mis-alignment of your table.
Take this style off and the alignment of the image moves to the top.
If you need this line-height for your text, apply it to the paragraph instead of the table cell.