CSS 的表格 td 样式

Posted 2023-03-06

【中文标题】CSS 的表格 td 样式

【英文标题】：Table td style for CSS

【发布时间】：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

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

【问题讨论】：

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

【参考方案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

应该这样做！