表模型中的数据表样式CSS td

xriantvc 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(97)

我需要在我的表中设置ds元素的样式，使其左右填充等于0 px，并且我所做的任何事情都不会影响它们。

<table class="table table-borderless" style="overflow: scroll" width="100%" id="topAlarmsDeviceLine">
                        </table>
let tableModel = [
        {
            title: '',
            type: 'html',
            targets: 0,
            data: function (source, type, val){
                return source.Denumire;
            }
        },
        {
            title: '',
            type: 'html',
            targets: 1,
            data: function(source, type, val) {
                if (source.processor && source.processor > 59) {
                    return "<td style='padding: 0px !important;'>" + Math.round(source.processor / 60) + 'h' + "<span class='border border-dark-subtle border-2 border-start-0' style='background-color: #F0AD4E; width:10px; height:10px; display: inline-block; margin: 5px; vertical-align: middle;'></span></td>";
                } else if(source.processor && 0 < source.processor && source.processor < 60) {
                    return "<td style='padding: 0px !important;'>" + source.processor + 'm' + "<span class='border border-dark-subtle border-2 border-start-0' style='background-color: #F0AD4E; width:10px; height:10px; display: inline-block; margin: 5px; vertical-align: middle;'></span></td>";
                } else {
                    return "";
                }
            }
        },
        {
            title: '',
            type: 'html',
            targets: 2,
            data: function(source, type, val) {
                if (source.ram && source.ram > 59) {
                    return "<td style='padding: 0px !important;'>" + Math.round(source.ram / 60) + 'h' + "<span class='border border-dark-subtle border-2 border-start-0' style='background-color: #5CB85C; width:10px; height:10px; display: inline-block; margin: 5px; vertical-align: middle;'></span></td>";
                } else if(source.ram && 0 < source.ram && source.ram < 60) {
                    return "<td style='padding: 0px !important;'>" + source.ram + 'm' + "<span class='border border-dark-subtle border-2 border-start-0' style='background-color: #5CB85C; width:10px; height:10px; display: inline-block; margin: 5px; vertical-align: middle;'></span></td>";
                } else {
                    return "";
                }
            }
        },...

我尝试添加td样式作为回报，方法是我的例子，但它不起作用。我也试过选择td表并使用css的jquery方法，仍然一无所获：
$（'# topAlarmsDeviceLine td'）。css（'padding'，'0px'）;

css

来源：https://stackoverflow.com/questions/76149503/datatable-style-css-td-in-table-model

2条答案

按热度按时间

kr98yfug1#

我可以假设你在之后设置!important，因为使用table-borderless可能会导致表及其子对象的一些默认样式。
试试$('#topAlarmsDeviceLine td').css('padding', '0px !important');
您可以在开发人员窗格中检查计算样式，并遵循设置当前填充的规则。

赞(0）回复(0）举报 2023-05-02

qgzx9mmu2#

如果您有一个返回<td style="...">foo</td>字符串的data:选项，这意味着您正在尝试将<td>元素插入到DataTables自动构造的<td>元素中。
在这种情况下，DataTables将删除您的<td>，只显示内部文本。
所以，这就是在代码中发生的事情，例如：

return "<td style='padding: 0px !important;'> + ..."

你可以试试这样的方法：

var dataSet = [{
    "id": "123",
    "name": null,
    "position": "System Architect",
    "salary": "$320,800",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
  },
  {
    "id": "456",
    "name": "Donna Snider",
    "position": "Customer Support",
    "salary": "$112,000",
    "start_date": "2011/01/25",
    "office": "New York",
    "extn": "4226"
  },
  {
    "id": "567",
    "name": "Cedric Kelly",
    "position": "Senior Javascript Developer",
    "salary": "$433,060",
    "start_date": "2012/03/29",
    "office": "Edinburgh",
    "extn": "6224"
  },
  {
    "id": "432",
    "name": "Airi Satou",
    "position": "Accountant",
    "salary": "$162,700",
    "start_date": "2008/11/28",
    "office": "Tokyo",
    "extn": "5407"
  },
  {
    "id": "987",
    "name": "Brielle Williamson",
    "position": "Integration Specialist",
    "salary": "$372,000",
    "start_date": "2012/12/02",
    "office": "New York",
    "extn": "4804"
  }
];

$(document).ready(function() {

  var table = $('#example').DataTable({
    dom: 'itp', // just for demo simplicity
    data: dataSet,
    columnDefs: [{
        title: 'Position',
        type: 'html',
        targets: 0,
        data: function(source, type, val) {
          return '<td style="background-color: #F0AD4E; padding: 8px; margin: 3px;">' + source.position + '</td>';
        }
      },
      {
        title: 'Office',
        type: 'html',
        targets: 1,
        data: function(source, type, val) {
          return '<span style="background-color: #F0AD4E; padding: 8px; margin: 3px;">' + source.office + '</span>';
        }
      }
    ]
  });

});

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

  <div style="margin: 20px;">

    <table id="example">
    </table>

  </div>

</body>

</html>

在上面的演示中，Position列尝试（但失败了）在<td>元素中使用样式;而Office列使用<span>元素。您可以看到样式已成功应用于跨度。
你能用它做的是有限的--也许对你的需要来说太有限了。你可能需要实验。
您可以查看DataTables default styling options。这些也可能对你的需求来说太有限了。
您可以使用另一个样式框架-DataTables支持的样式框架之一。DataTables下载页有一个列表。参见Step 1. Choose a styling framework。

赞(0）回复(0）举报 2023-05-02

我来回答

表模型中的数据表样式CSS td

2条答案

相关问题

热门标签

最新问答