JSFiddle - React, Tailwind, and code Playground

by Jonah

HTML

<div id = "table_container">
    <table id = "producttable">

    </table>
</div>

CSS

*
{
    margin: 0;
    padding: 0;
}

html, body
{
    width: 100%;
    height: 100%;
}

#table_container
{
    width: 300px;
    height: 200px;
    box-sizing: border-box;
    position: absolute;
    left: 15px;
    top: 15px;
}

#producttable
{
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    font-family: Roboto, Consolas, Arial;
}

#producttable td
{
    border: 1px solid black;   
    text-align: center;
}

JavaScript

var list =
[
	{
		name: 'Banana',
		cost: 100
	},
	{
		name: 'Apple',
		cost: 200
	},
	{
		name: 'Orange',
		cost: 300
	}
];

var appendThis = '';

for(var key in list)
{
	var product = list[key];

	appendThis += '<tr>';
	appendThis += '<td>' + product.name + '</td>';
	appendThis += '<td>' + product.cost + '</td>';
	appendThis += '</tr>';
}

$('#producttable').empty().append(appendThis);