DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

I want to be able to resize the entire table. Please advise

I want to be able to resize the entire table. Please advise

drfunkdrfunk Posts: 58Questions: 8Answers: 0
in Free community support

so right now when I resize the browser the table does not resize with it. I tried reducing the width but it does not do the trick.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,570Questions: 26Answers: 4,996

    See if this example helps.

    Kevin

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0
    edited February 2021

    I tried that I think but it is not working...

    <style type="text/css" class="init">
        div.container {
                width: 80%;
        }

        </style>
<script src="/RED/js/jquery-3.3.1.js"></script>
<script src="/RED/js/jquery.dataTables.min.js"></script>
<script src="/RED/js/dataTables.buttons.min.js"></script>
<script src="/RED/js/jszip.min.js"></script>
<script src="/RED/js/pdfmake.min.js"></script>
<script src="/RED/js/vfs_fonts.js"></script>
<script src="/RED/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" class="init">
  \$(document).ready(function() {
    \$('#ncs').DataTable( {
         "autoWidth": true,
         "scrollY": "400px",
         "scrollX": true,
         "dom": '<lf<t>Bip>',
         "lengthMenu": [[15,20,25,50,-1], [15,20,25,50,"All"]],
         "columnDefs": [
                {"width" : "120px", "targets": 0},
                {"width" : "50px", "targets": 1},
                {"width" : "200px", "targets": 2},
                {"width" : "30px", "targets": 3},
                {"width" : "40px", "targets": 4},
                {"width" : "200px", "targets": 5}
         ],
         "buttons": [
             'csv',
             {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'LEGAL'
             }
         ]
    } );
  } );

    Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

  • kthorngrenkthorngren Posts: 21,570Questions: 26Answers: 4,996
    Answer ✓

    I don't see your table tag but the point of the example is to place style="width:100%" on the table element itself. If you still need help please provide a link to your page or a test case showing the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

    thanks Kevin I am pretty new at this

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

    any help would be appreciated

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    Answer ✓

    If you still need help please provide a link to your page or a test case showing the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

    Ok I think I set it up:
    http://live.datatables.net/toziyolo/1/

    LMK

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0
    edited February 2021

    I made a page :
    http://live.datatables.net/toziyolo/1/

    not sure how to include the css & js

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

    Yes I have that
    <BODY>

    <

    div class="container">
    <CENTER>

    NMS Audit Log

    <HR HEIGHT="15" >
    </CENTER>

    <

    table id="ncs" class="display" width="100%">

  • kthorngrenkthorngren Posts: 21,570Questions: 26Answers: 4,996

    The table is resizing with the browser. Please provide specific details of the problem you are seeing or what you want changed.

    Kevin

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

    Hi Kevin,

    I am not seeing the resize when I make the browser window smaller it cuts off the search field and Previous 1 2 3 Next stuff at bottom right. also the table rows. I am using chrome is that an issue?

  • kthorngrenkthorngren Posts: 21,570Questions: 26Answers: 4,996
    Answer ✓

    Sorry I didn't notice that your test case wasn't working properly. It isn't loading the JS and CSS files because of your local path. So none of the Datatables features were being loaded. See the updated example:
    http://live.datatables.net/toziyolo/2/edit

    Is this working the way you expect?

    Kevin

  • drfunkdrfunk Posts: 58Questions: 8Answers: 0

    wow thanks yea that works!!!

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.