Displaying search results in an HTML table

I am using a javascript template to display the results coming from a search query. Currently

 <script id="collection-template" type="text/html"> <div
 class="partners__item"> <%=CustomerName%>,<%=CustomerType%> </div>
 </div> </script>  <div id="collection"></div>

gives me the results with comma in between. This script loops as many times as records.

If I want to use a table to present the search results, i am adding table content in the looping section, which generates separate tables with individual headings.

<script id="collection-template" type="text/html">
<div class="partners__item">
<table class="table table-striped">
<th scope="col">Name</th>
<th scope="col">Type</th>
<div class="row">
<div id="collection"></div>

I tried to move the thead section out of the loop, then the table structure goes away. As a structure I want to be able to build something like this:


Any suggestion is much appreciated.

The template I am using is from filter.js

function _renderHTML(str, data) {
var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
'with(obj||{}){__p.push(\'' +
.replace(/'/g, "\\'")
.replace(/<%-([\s\S]+?)%>/g, function(match, code) {
return "',escapeStr(" + code.replace(/\\'/g, "'") + "),'";
.replace(/<%=([\s\S]+?)%>/g, function(match, code) {
return "'," + code.replace(/\\'/g, "'") + ",'";
.replace(/<%([\s\S]+?)%>/g || null, function(match, code) {
return "');" + code.replace(/\\'/g, "'")
.replace(/[\r\n\t]/g, ' ') + ";__p.push('";
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n')
.replace(/\t/g, '\\t')

+ "');}return __p.join('');";

var func = new Function('obj', tmpl);

return data ? func(data) : function(data) { return func(data) };