I have below table where the headers and data are showing perfectly but in a same column. Instead I need to show them in a proper table format. Unfortunately, I am unable to do so.
Can someone please help me?
Please find the image how it looks like now.
This is my code for Field Names table which is fine.
<div style = "margin:0px 200px 0px 50px;">
<apex:dataTable style="background-color: #9e9494;" id="Randomtext" value="{!fieldMap[key1]}" var="listElementelements2" border="1">
<apex:column width="100" style="background-color: #ffffff;" headerClass="headerStyle" headerValue="Field Name" value="{!listElementelements2.Name}"/>
<apex:column width="100" style="background-color: #ffffff;" headerClass="headerStyle" headerValue="Field Type" value="{!listElementelements2.Field_Type__c}"/>
<apex:column width="500" style="background-color: #ffffff;" headerClass="headerStyle" headerValue="Object Name" value="{!listElementelements2.Object_Name__c}"/>
<apex:column width="100" style="background-color: #ffffff;" headerClass="headerStyle" headerValue="Dependency Name" value="{!listElementelements2.Dependency__c }"/>
<apex:column width="100" style="background-color: #ffffff;" headerClass="headerStyle" headerValue="Picklist Values" value="{!listElementelements2.Picklist_Values__c}"/>
</apex:dataTable>
</div>
HTML Code for Validation Rule table
<table id="contacttable">
<tr>
<apex:repeat value="{!$ObjectType.Configuration__c.Fieldsets.Validation_Rule}" var="varFieldName">
<div id="Randomtext">
<th style="background-color: #9e9494;border-width: thick thick;">{!varFieldName.Label}</th>
</div>
<div>
<apex:repeat value="{!configMap[key1][key2]}" var="listElement">
<apex:repeat value="{!listElement}" var="listElementelements" >
<tr>
<td style="background-color: #ffffff;border-width: thick thick;">{!listElementelements[varFieldName]}</td>
</tr>
</apex:repeat>
</apex:repeat>
</div>
</apex:repeat>
</tr>
</table>
After Tushar's solution it managed to be in a row but second set of data gets into same problem.
Scrrenshot: