Table exceeds width of wrapper-div?

Niccober

Hi,

my DataTable constantly exceeds the wrapper-div onLoad. The table is placed within a div that can be resized by clicking a menue button causing the div to expand a bit. When the button is clicked and the div expanded, the table fits perfectly into the div when the table tag is set to width="100%". In that condition the table is enclosed by the generated wrapper-div.

Unfortunately the table does not render correctly both onLoad and also when the initial condition is restored by clicking the menue button again causing the div to transform into the initial smaller state.

I already tried to solve the problem by manually setting css styles to the table but this shows absolutely no effect. I also tried to use the columns.adjust() method but this also doesn't change a thing. When looking at the console, the width of the table is set to 0px - changing this value again does not influence the style. The only change I managed to apply is to size the table even bigger by setting the width value of the table to 110% or more - smaller than 100% is not changing anything.

This is my HTML:

<table id="grundbuch_abteilungI" style="width:80%">
                        <thead>
                            <tr>
                                <td style="padding-left:15px;">ID</td>
                                <td>Band</td>
                                <td>Blatt</td>
                                <td>Lfd. Nr.</td>
                                <td>Flurstück</td>
                                <td>Fläche</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><p class="gbI_id">1</p></td>
                                <td><input class="save_val_gav gbI_band"/></td>
                                <td><input class="save_val_gav gbI_blatt"/></td>
                                <td><input class="save_val_gav gbI_nummer"/></td>
                                <td><input class="save_val_gav gbI_flurstück"/></td>
                                <td><input class="save_val_gav gbI_fläche area"/></td>
                            </tr>
                        </tbody>
                    </table>

And this is my JS:

    $('#grundbuch_abteilungI').DataTable({
        searching: false, 
        paging: false, 
        info: false,
        autoWidth: true,
        order: [[1, 'asc']], 
        "columns": [
            {"orderable": false},
            {"orderDataType":"dom-text-numeric"},
            {"orderDataType":"dom-text-numeric"},
            {"orderDataType":"dom-text-numeric"},
            {"orderDataType":"dom-text-numeric"},
            {"orderDataType":"dom-text-numeric"}
        ]
    });

Any advice on how to solve this issue would be much appreciated. Thanks in advance!

Greetings,
Niccober

colin

Hi @Niccober ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin