Question

我有一个嵌套表，目前它看起来像带有docInfo类的嵌套表的第二列更多地与顶部对齐而不是在中间。它包含'John'。表的其余部分看起来没问题：

<table class="strategies">
    <thead>

    <tr>
        <th  class="first_single">Your spending and savings.
        </th>
        <th class="second"></th>
        <th class="fourth">Road</th>

        <th class="fifth_single"></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-class="'odd'" class="odd">
        <td>
            <table class="docInfo">
                <tbody>
                <tr>
                    <td rowspan="2" class=""><img src="/concierge/images/doc7.png" alt="docimage"></td>
                    <td>John</td>
                </tr>
                <tr>
                    <td><span><p>Mar 6,2015 9:10:11 AM
                    </p></span></td>
                </tr>
                </tbody>
            </table>

        </td>
        <td>Selected</td>
        <td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',1)"
                 ng-show="strategy.statuses[0].status!='selected'" class=""><img src="/concierge/images/rb_checked.png"
                                                                                 alt="radiobutton"
                                                                                 ng-show="strategy.statuses[0].status=='selected'"
                                                                                 class="ng-hide"></td>
        <td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',2)"
                 ng-show="strategy.statuses[1].status!='selected' &amp;&amp; persons.length == 2" class="ng-hide"><img
                src="/concierge/images/rb_checked.png" alt="radiobutton" ng-show="strategy.statuses[1].status=='selected'"
                class="ng-hide"></td>
    </tr>
    <tr ng-class="'odd'" class="odd">
        <td>
            <table class="docInfo">
                <tbody>
                <tr>
                    <td rowspan="2" class=""><img src="/concierge/images/doc7.png" alt="docimage"></td>
                    <td>Bert</td>
                </tr>
                <tr>
                    <td><span><p>Mar 6,2015 9:10:11 AM
                    </p></span></td>
                </tr>
                </tbody>
            </table>

        </td>
        <td>Selected</td>
        <td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',1)"
                 ng-show="strategy.statuses[0].status!='selected'" class=""><img src="/concierge/images/rb_checked.png"
                                                                                 alt="radiobutton"
                                                                                 ng-show="strategy.statuses[0].status=='selected'"
                                                                                 class="ng-hide"></td>
        <td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',2)"
                 ng-show="strategy.statuses[1].status!='selected' &amp;&amp; persons.length == 2" class="ng-hide"><img
                src="/concierge/images/rb_checked.png" alt="radiobutton" ng-show="strategy.statuses[1].status=='selected'"
                class="ng-hide"></td>
    </tr>
    </tbody></table>

这是样式表：

.strategies {
    margin-top: 20px;
    table-layout: fixed;
}
.strategies td {
    margin: 0 5px;
    padding: 10px 18px;
    vertical-align: middle;
}
.strategies thead tr {
    background-color: white;
    color: black;
    vertical-align: bottom;
    text-align: left;
    padding-right: 14px;
}
.strategies thead th {
    padding: 12px 8px 7px;
    font-weight: lighter;
}
.strategies tbody tr {
    font-size: 14px;
}
.strategies tbody tr.odd {
    background-color: yellow;
}
.strategies tbody tr.even {
    background-color: grey;
    color: black;
}

.strategies .first {
    width: 40%;
}

.strategies .first_single {
    width: 69%;
}

.strategies .second {
    width: 30%;
}

.strategies .third {
    width: 20%;
}

.strategies .fourth {
    width: 20%;
}

.strategies .fifth {
    width: 20%;
}

.strategies .fifth_single {
    width: 1%;
}

.docInfo {
    table-layout: fixed;
    float: left;
}
.docInfo th, .docInfo td {
    margin: 0 5px;
    padding: 0px 5px;
    line-height: 0.2;
    font-size: 10px;
    vertical-align: top;
    font-family: Arial;
    font-weight: bold;
}
.docInfo .first {
    width: 40%;
}
.docInfo .second {
    width: 60%;
}
.docInfo img {
    background: transparent;
    height: 25px;
}

这是一个小提琴参考：http://jsfiddle.net/dnpcps4n/11/

Answer 1

要做到这一点，没有太多事要做。首先，当你宣布：

时，你必须保持一致

<td>John</td>

和

<td><span><p>Mar 6,2015 9:10:11 AM</p></span></td>

将日期放在标记中会触发用户代理样式表（即浏览器）边距（顶部和底部）的出现。因为名字不在标签中，所以这会弄乱您的垂直居中，因为两个表格行的高度不同。所以 1）使两行具有相同的高度。我建议删除标记，因为它不是为此而制作的。如果您需要边距，则可以添加css样式。

从那时起，你差不多完成了。在.docInfo th, .docInfo td声明中，您需要删除该规则：

line-height: 0.2;

总结一下：

1）将<td>*date*</td>替换为<td>*date*</td>以与名字

一致

2）删除line-height: 0.2

请参阅updated fiddle

如何将表格列与中间对齐？

1 个答案: