Table td style for CSS - css

Question

I would like my TD text to move a bit but so far I am only able to text align left, center, right:
<div class= "col-md-7" id = "recyclable-list">
<table class="table">
<thead>
<tr>
<th style=" padding-left:25px;";>RecyclableID</th>
<th style=" padding-left:100px;">Name</th>
<th style=" text-align: center;">RecyclableType</th>
</tr>
</thead>
<tbody id="recycleTable">
</tbody>
</table>
This is my script call for the database:
var myarray = [];
$.ajax({
url:"https://ecoexchange.dscloud.me:8080/api/get",
method:"GET",
// In this case, we are going to use headers as
headers:{
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query:"RecyclableGet(0)",
// Gets the apikey from the sessionStorage
apikey:sessionStorage.getItem("apikey")
},
success:function(data,xhr,textStatus) {
myarray = data;
buildTable(myarray);
console.log(myarray);
},
error:function(xhr,textStatus,err) {
console.log(err);
}
});
function buildTable(data) {
var table = document.getElementById("recycleTable")
for (var i = 0; i < data.length; i++) {
var row = `<tr>
<td>${data[i].RecyclableID}</td>
<td>${data[i].Name}</td>
<td>${data[i].RecyclableType}</td>
</tr>`
table.innerHTML += row
}
};
This is how the table looks like currently:
Table image look like
Now, how do I style this to match the header rows?

Answer 1

You have used inline-styles for your table head. Try to repeat the same in JQuery within the template literals where you are creating the table rows on fly to match the thead styling for all the rows.
for (var i = 0; i < data.length; i++) {
var row = `<tr>
<td style="padding-left:25px;">${data[i].RecyclableID}</td>
<td style="padding-left:100px;">${data[i].Name}</td>
<td style="text-align: center;">${data[i].RecyclableType}</td>
</tr>`
table.innerHTML += row
}
This should do it !