I have rendered a table using html table tag, with rows and columns inside it, and cells containing texts.
So its a typical generic html table. Values are coming from an object. So basically each row represents an object.
Now I have a new field in the object which is a collection. What I want is to display values in collection aligned horizontally all along the width of the table. So this new filed doesn't have a particular column for it, but rather all its values are displayed along full width of the table, one by one. Each individual value in collection field is displayed in a sort of greyed out oval shape. So for eg in table below, I want the new collection field to be displayed across heading1, heading2 with no separation.
| Heading 1 | Heading 2 |
|---|---|
| John | NY City |
What is optimum way of doing this?
Edit: I tried the solution in attached link, using colSpan. So I added a new element which contains collection values, and I use colspan
<table>...
<tr>..existing row</tr>
<tr><td colspan="2"> ...new row containing collection values</td></tr>
</table>
But what I observe is that existing row disappears and now only collection values are displayed.
