Make DataTable wider

Question

I want to expand this table because I think this table is too narrow. This is an actual screenshot of the image.

and this is my code:

$('#month-auto-depo').DataTable({
      "columns" : [
        {"width": "30%"},
        {"width": null}
      ],
      "searching": false,
      "paging"   : false,
      "ordering" : false,
      dom        : 'Bfrtip',
      buttons    : [
        'csv', 'excel',
      ],
      "scrollX"  : true
});
$('[data-toggle="tooltip"]').tooltip();

Do you mind adding the html code for the table itself?

fixatd
– fixatd

2018-12-20 09:38:54 +00:00
Commented Dec 20, 2018 at 9:38 — fixatd
– fixatd, Commented Dec 20, 2018 at 9:38
And you should have simple snippet code

Rom
– Rom

2018-12-20 09:39:20 +00:00
Commented Dec 20, 2018 at 9:39 — Rom
– Rom, Commented Dec 20, 2018 at 9:39
I can't, Stack Overflow prevent me to post too much codes.

Ryuujo
– Ryuujo

2018-12-20 09:42:54 +00:00
Commented Dec 20, 2018 at 9:42 — Ryuujo
– Ryuujo, Commented Dec 20, 2018 at 9:42

Harshit Tailor · Accepted Answer · 2018-12-20 09:45:18Z

3

Set Width:100% or anything you want on your table tag.

<table class="datatable table" style="width:100%">

edited Dec 20, 2018 at 9:45

answered Dec 20, 2018 at 9:39

Harshit Tailor

3,2816 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rom · Accepted Answer · 2018-12-20 09:46:44Z

DataTable document (https://datatables.net/examples/basic_init/flexible_width.html) said:

Often you may want to have your table resize dynamically with the page. Typically this is done by assigning width:100% in your CSS, but this presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the width attribute to the HTML table tag or inline width style (style="width:100%"), it will be used as the width for the table (overruling any CSS styles).

So you should set the container contain data table with your width, and data table set inline style style="width:100%" such as

<table id="example" class="display" style="width:100%">

It is enough smart (flexible) to change the table size when window change

Example with container width 80%:

div.container {
        width: 80%;
    }

Collectives™ on Stack Overflow

Make DataTable wider

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related