Question 108598 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Datatable style CSS td in table model

I need to style the ds elements inside my table to have padding left and right equal to 0px and nothing I do affects them.

 <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 "";
                }
            }
        },...

I have tried to add the td style in return, the way is is my example, but it doesn’t work.
I also tried to select the table td and use css jquery method, still nothing:

$(‘#topAlarmsDeviceLine td’).css(‘padding’, ‘0px’);

Tags:

2

Answers


  1. 0

    I can suppose you to set !important after because using table-borderless may lead to some default style for the table and its child objects.

    Try $('#topAlarmsDeviceLine td').css('padding', '0px !important');

    You can check computed styles in the Developer’s pane and follow the rule that sets your current padding.

    Login or Signup to reply.
  2. 0

    If you have a data: option which returns a <td style="...">foo</td> string, that means you are trying to insert a <td> element into the <td> element which is automatically constructed by DataTables.

    In such cases, DataTables will remove your <td> and only show the inner text.

    So, this is what is happening in code such as:

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

    You can try something like this:

    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>

    In the above demo, the Position column attempts (and fails) to use styles in a <td> element; whereas the Office column uses a <span> element. You can see the styles are successfully applied to the span.

    What you can do with this is limited – maybe too limited for your needs. You may need to experiment.

    You can take a look at the DataTables default styling options. Those may also be too limited for your needs.

    You can use another styling framework – one of those which is supported by DataTables. The DataTables download page has a list. See Step 1. Choose a styling framework.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search