Michael Michael - 27 days ago 8
CSS Question

How to style table's content

I create table dynamically:

function createResultsTable(data) {
var table = $('<table id="tblResultsList">');
var tr;
var td;

$.each(data.d.foundItems, function(i, item) {

var button = $('<button/>', {
text: item.code,
click: function () { CellClicked(item.x,item.y,"") }
});
i % 3 === 0 && (tr = $('<tr>').appendTo(table));

tr.append('<td>').prepend(button).end();
});

$('#rstSearch').append(table);
}


Here how it looks in the view now:

enter image description here

Here is FIDDLE!

Here is desired look of the content:

enter image description here

Here the FIDDLE!

But I am stuck. I don't know how to move to the center content and make it quadratic.

Please help me to achieve the desired look of the content.

Answer Source

I have changed your logic a little:

td = $('<td>').appendTo(tr)
button.appendTo(td);

and have added some styles. Here is the working fiddle: https://jsfiddle.net/o2gxgz9r/14666/

If you want to make tds square, here is the solution: https://stackoverflow.com/a/22835903/6053654

Feel free to ask if anything isn't clear.