HTML Table or CSS? (Layout Issue) - html

Question

I am struggling to understand how I can achieve the look I want with HTML tables/CSS while also having an Accordion, I am getting data from multiple SharePoint lists and displaying it to the page in a JqueryUI Accordion however because it's essentially just a data dump I need to be able to add headers so the users know what data is what. I have created a JS Fiddle of how I tried to do it, with the issues explained below:
http://jsfiddle.net/7uv3m1fy/
The look I am trying to achieve is a set of headers across the top for the parent dataset, with the data from that set being the clickable part of the Accordion. These need the data to line up under the headers. This is pretty much the entire issue I have, they seem to be using only the first of the HTML table on subsequent rows when I want the information to fill all of the columns (preferably with a way to match where the information goes to under it's header)
I honestly don't know enough about CSS or how I could achieve this using DIV's while still being able to get information to line up.
The biggest issue I have is that because the data populating these tables is called from SharePoint lists/views, the number of columns is completely dynamic so I cannot hardcode column width/numbers.
Any suggestion of how I could do this using CSS or HTML or Both would be greatly appreciated.
below is the code I am currently using to generate this (C# as it's for a SharePoint WebPart)
try
{
if (parentItems.Count > 0)
{
newHTML = newHTML + "<Table style='table-layout:fixed' width='100%'><tr>";
foreach (string fieldName in viewFields)
{
newHTML = newHTML + "<td> " + parentList.Fields.GetFieldByInternalName(fieldName).Title + "</td>";
}
newHTML = newHTML + "</tr>";
}
}
catch
{
newHTML = newHTML + "No Results Found";
}
foreach (SPListItem parentitem in parentItems)
{
newHTML = newHTML + "<tr class='yes' width='100%'><td> Parent:</td><td>" + parentitem.ID.ToString() + "</td></tr><tr width='100%'><td>";
foreach (SPListItem childitem in childItems)
{
if (childitem[RelatedID].ToString() == parentitem.ID.ToString())
{
newHTML = newHTML + "<div>" + childitem.ID.ToString() + "</div>";
}
}
newHTML = newHTML + "</td></tr>";
}
newHTML = newHTML + "</table>";
}
And in the webpart I am adding the following to call it:
<div id="accordion">
<%= this.newHTML %>
</div>
I hope I have given enough information, although the code above doesn't really relate to the question it will show you how I am trying to dynamically output the HTML to achieve my goal.
Happy to provide more info if you need it.
Regards,