CODEWITHSUNDEEP
htmlcss
Pindakaas
Pindakaas

Reputation: 4439

how to get 2 nested tables next to eachother instead of on top?

I have a table with 4 columns which has a couple of nested tables in the first column. At the moment they are on top of eachother, how can I place them next to eachother? Table 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>

This is the style sheet:

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

Here is a plunkr reference: http://plnkr.co/edit/DUXDwB

Upvotes: 1

Views: 78

Answers (1)

Anuj Kumar
Anuj Kumar

Reputation: 468

You just need to add couple of css.

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

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

Upvotes: 1

Related Questions