Table CSS 的 td 样式

Question

我希望我的 TD 文本移动一点，但到目前为止我只能将文本左对齐、居中、右对齐：

<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>

这是我对数据库的脚本调用：

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
    }
};

这是 table 目前的样子：

Table image look like

现在，我该如何设置样式以匹配 header 行？

Answer 1

您已经为您的 table 头像使用了内联样式。尝试在您正在创建 table 行的模板文字中的 JQuery 中重复相同的操作，以匹配所有行的 thead 样式。

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
}

应该这样做！

Table CSS 的 td 样式

Table td style for CSS

css

html-table