How to add space between 2 buttons in a datatable?

Question

I have 2 buttons CSV and PDF on my datatable and they seem to be very close to me. I need help on adding some space between them. I tried using 'spacer' button as per https://datatables.net/extensions/buttons/examples/initialisation/spacer.html but nothing works.

Following is my code:

 buttons: [
    {
      extend: 'csv', 
      title: 'Lock Logs for @Model.LockName',
      filename: function () {
        var filename = 'Lock Logs for @Model.LockName ';
        var dt = new Date();
        var currentdatetime = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + '_' + dt.getHours() + '-' + dt.getMinutes() + '-' + dt.getSeconds();

        return filename + currentdatetime;
      }
    },
{
   extend: 'spacer'
},
    {
      extend: 'pdf',
      title: 'Lock Logs for @Model.LockName',
      filename: function () {
        var filename = 'Lock Logs for @Model.LockName ';
        var dt = new Date();
        var currentdatetime = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + '_' + dt.getHours() + '-' + dt.getMinutes() + '-' + dt.getSeconds();

        return filename + currentdatetime;
      }
    }
  ]

Below are my scripts that i am using:

<link rel="stylesheet" type="text/css" href="~/Scripts/DataTables/media/css/jquery.dataTables.css">
<script type="text/javascript" src="~/Scripts/DataTables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="~/Scripts/DataTables/extensions/Responsive/css/responsive.dataTables.css">
<script type="text/javascript" src="~/Scripts/DataTables/extensions/Responsive/js/dataTables.responsive.js"></script>
<script type="text/javascript" src="~/Scripts/pdfmake.min.js"></script>
<script type="text/javascript" src="~/Scripts/vfs_fonts.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/extensions/Buttons/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/extensions/Buttons/js/buttons.bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/extensions/Buttons/js/buttons.html5.js"></script>

Answer 1

try using this css

.dataTables_buttons .buttons-csv,
.dataTables_buttons .buttons-pdf {
  margin-right: 10px;
}

This will add 10px of margin to the right of each button. You can adjust the value of the margin-right property to change the amount of space between the buttons.

For example, the following CSS will add 20px of space between the buttons:

.dataTables_buttons .buttons-csv,
.dataTables_buttons .buttons-pdf {
  margin-right: 20px;
}

You can also use the spacer button to add space between buttons. The spacer button does not actually display a button, but it does introduce a space between buttons. To use the spacer button, add it to the buttons array after the buttons that you want to separate. For example, the following code will add a space between the CSV and PDF buttons:

buttons: [
  {
    extend: 'csv',
    title: 'CSV'
  },
  {
    extend: 'spacer'
  },
  {
    extend: 'pdf',
    title: 'PDF'
  }
]

You can also use the spacer button to add space between any two buttons in the buttons array.