Table td style for CSS

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?