html - 如何将图像对齐到行的顶部？

Question

我试图将图像对齐到此表中行的顶部:

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

目前，图像有点位于每一行的中间。我怎样才能让它们与行的顶部对齐？我尝试设置 verticalalign 属性，但没有修复它。

这是样式表:

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

}

还创建了一个 plunkr 网址:http://plnkr.co/edit/CssSPt?p=preview

Answer 1

我觉得你的问题是

行高:0.2；

应用于 .docInfo td 的样式对于文本来说行高不够大，因此会导致表格未对齐。

取消此样式，图像的对齐方式将移动到顶部。

如果您的文本需要此行高，请将其应用于段落而不是表格单元格。