<aura:component controller="fetchdetailsfromAccount" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="acc" type="Account[]" default=""/>
   <article class="slds-card">
            <div class="slds-card__header slds-grid">
                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                    <div class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-account" >
                            <lightning:icon iconName="standard:account" size="large" alternativeText="List account"/>
                        </span>
                    </div>
                    <div class="slds-media__body">
                        <h2>
                            <a href="{}" class="slds-card__header-link slds-truncate" title="Account">
                                <span class="slds-text-heading_small">Account</span>
                            </a>
                        </h2>
                    </div>
                </header>
            </div>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Name">Account Name</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Phone">Contact Name</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Phone">Email</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.acc}" var="acc" >
                        <tr>
                            <td>
                                <div class="slds-truncate" title="">{!acc.Name}</div>
                            </td>
                                <td>
                                    <aura:iteration items="{!acc.Contacts}"  var="con" indexVar="index">
                                    <div  title=""><ol><li>{!con.Name}</li></ol></div>
                                        </aura:iteration>
                                </td> 
                            <td>
                                    <aura:iteration items="{!acc.Contacts}"  var="con" indexVar="index">
                                    <div  title=""><ol><li>{!con.Email}</li></ol></div>
                                        </aura:iteration>
                                </td> 
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
         </article>
</aura:component>



Js
 doInit : function(component) {
        var action = component.get("c.getaccrecordstodisplay");
       action.setCallback(this, function(response) {
        // alert(JSON.stringify(response.getReturnValue()));   
         var state = response.getState(); 
         if (component.isValid() && state === "SUCCESS")
             component.set("v.acc", response.getReturnValue());  
        });
        $A.enqueueAction(action);
    }


Apex

public class fetchdetailsfromAccount {
   @AuraEnabled
    public static List<Account> getaccrecordstodisplay(){
       return [select name,phone,(select Name,Email from contacts) from Account];
    }
 }