html - 如何让 2 个嵌套表彼此相邻而不是在顶部？

Question

我有一个包含 4 列的表，第一列中有几个嵌套表。现在他们在彼此之上，我怎么能把他们放在一起呢？表格 html:

<table class="customers">
    <thead>
    <tr>
        <th  class="first">
            How can I get the tables next to eachother?
        </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">
        <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="/concierge/images/doc5.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="/concierge/images/doc5.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>

这是样式表:

.customers
{
    table-layout: fixed;
    border: inset 2px;
    float: left;
}
.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%;
}

这是一个 plunkr 引用:http://plnkr.co/edit/DUXDwB

Answer 1

你只需要添加几个 css。

tr.odd>td,tr.even>td{
  width:100%;
 }

.docInfo{
   width:50%;
   float:left;
 }