CODEWITHSUNDEEP
javascriptjquerycssdatatables
Yuriy
Yuriy

Reputation: 457

How to add margin to table in jquery datatables?

I need to add some space between table, table length and table pagination. Like this:enter link description here This is my js code:

$(document).ready(function () {
        $('#data-table').dataTable({
            bFilter: false,
            aoColumnDefs: [
              {
                  bSortable: false,
                  aTargets: [1, 2],

              },
            {
                'bVisible': false,
                aTargets: [4],
            },
            {

                "targets": 0,
                "render": function (data, type, full, meta)
                {
                    return '<a href = "@(Url.Action("EmployeeAccount", "Company"))?EmployeeId=' + full[4] + '">' + data + '</a>';
                }
            },
            ]
        })
    });

Html:

     <table class="table table-striped table-bordered table-hover little_margin_table" id="data-table" width="100%">
/...
                    </table>

How can I do it?

Upvotes: 1

Views: 14632

Answers (6)

FloverOwe
FloverOwe

Reputation: 375

If all the CSS tricks fail and you want a right-side margin, you can add a small blank column on the right using:

  <th> &nbsp; </th> ... <td> &nbsp; </td>"

It looks a little dodgy, but effectively solves the problem. In some browsers the scroll-bar otherwise covers part of the right-most column in wide tables.

Upvotes: 0

Squidward Tentacles
Squidward Tentacles

Reputation: 900

You must set margin for table in div wrapper of table, example:

if you have table with id userTables, use selector #userTables_wrapper in css to set table margin.Why? see screenshot below:

enter image description here

Datatables auto generate div wrapper with id your_table_id + "_wrapper".This wrapper is parent for your table.

Upvotes: 5

Kannan K
Kannan K

Reputation: 4461

Try this CSS:

table.dataTable {
     padding-top: 50px;
}

Upvotes: 1

Andriy Ivaneyko
Andriy Ivaneyko

Reputation: 22041

Use Datatables Styling to create styles for your datatable or modify your css by own:

table.dataTable {
margin: 20px 0 !important;
}

Upvotes: 1

Gyrocode.com
Gyrocode.com

Reputation: 58900

Use the following CSS rules:

table.dataTable {
  margin-top:2em !important;  
  margin-bottom:2em !important;  
}

See this jsFiddle for code and demonstration.

Upvotes: 1

user4454229
user4454229

Reputation:

In your CSS:

#data-table {
    margin: 20px 0;
}

But, to be honest, your question is lacking any HTML and/or CSS. It's also blatantly non-researched, as adding margins between HTML elements can be understood without posting a question on SO.

In any case, what the CSS does it create a top and bottom margin of 20px for your table.

Upvotes: 3

Related Questions