CSS 的表格 td 样式答案

【问题标题】：Table td style for CSSCSS 的表格 td 样式
【发布时间】：2022-01-10 11:59:17
【问题描述】：

我希望我的 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 image look like

现在，如何设置样式以匹配标题行？

【问题讨论】：

请你澄清一下“移动一点”。目前尚不清楚您要达到的目标。谢谢。

标签： css html-table

【解决方案1】：

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

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
}

应该这样做！

【讨论】：