Cannot get jQuery dataTables to fill container

Question

My question is very similar to this one. I would like my table to fill its container, but it takes on whatever size it wants to.

The html tags around the table are:

<body>
  <div>
    <section>
      <table id="my_table">

The css for div and section:

div {
    width: 50%;
    margin: 0px auto;
    overflow: hidden;
    padding: 0 0;
}

section {
    float: left;
    margin-bottom: 20px;
}

I am not doing anything fancy with dataTables:

$('#my_table').dataTable()

I tried pretty much everything in the linked post, but I cannot get the dataTables to fill their container. I removed autoWidth and set the 4 columns to be 25% each. This changed their relative sizes but the total width was still too small.

Could this have anything to do with the section tag?

When I enter anything in the search field, the table becomes the appropriate size.

A jsFiddle that replicates the problem for me: http://jsfiddle.net/mushroom/GHU4f/1/

Do you have tags defined? Datatables requires the table have them — Jay Rizzi, Nov 20 '12 at 01:50
Can you share a link to a working example of them problem in something like jsfiddle.net? — 3dgoo, Nov 20 '12 at 02:06
Or at least post the HTML so that the problem can be diagnosed — Jay Rizzi, Nov 20 '12 at 02:37
Added a link to jsFiddle that replicates the problem for me. I get the behavior I described when using both firefox and chrome. — mushroom, Nov 20 '12 at 02:50

mushroom · Accepted Answer · 2012-11-20T03:07:09.177

3

Adding width : 100% to the section css fixed the issue:

section {
    float: left;
    margin-bottom: 20px;
    width:100%;
}

edited Nov 20 '12 at 03:07

answered Nov 20 '12 at 03:00

mushroom

6,201
5
36
63

score 0 · Answer 2 · answered Sep 10 '19 at 15:48

0

Add the code below to "table" element works for me.

style="width: 100%;"

answered Sep 10 '19 at 15:48

Ellix4u

566
5
9

Cannot get jQuery dataTables to fill container

2 Answers2