Applying "compact" to datatables

Applying "compact" to datatables

fergieplfergiepl Posts: 4Questions: 1Answers: 0

I am using this code

<

table cellpadding="0" cellspacing="0" border="0" class="display compact" width="100%" >

But I still do not have a "compact" look.

I have this code as well

<style type="text/css" title="currentStyle">
@import "[siteurl]/wp-content/datatables/DataTables-1.10.11/css/jquery.dataTables.min.css";
@import "[siteurl]/wp-content/datatables/DataTables-1.10.11/css/responsive.dataTables.min.css";
@import "[siteurl]/wp-content/datatables/Buttons-1.1.2/css/buttons.dataTables.min.css";
.lb {
float: left;
clear: both;
}
</style>

Replies

  • allanallan Posts: 63,210Questions: 1Answers: 10,415 Site admin

    Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

    Information on how to create a test page, if you can't provide a link to your own page can be found here.

    Here is a simple test case with a compact style: http://live.datatables.net/tawejoku/1/edit .

    Thanks,
    Allan

  • fergieplfergiepl Posts: 4Questions: 1Answers: 0

    Sorry! Thank you for your help.

    https://www.riverviewcamp.org/qrynametag-2/

  • allanallan Posts: 63,210Questions: 1Answers: 10,415 Site admin

    The styles in style.css is overriding DataTables compact styling:

    table.cart th, #main-content table.cart th, table.cart td, #main-content table.cart td, table.cart tr, #main-content table.cart tr, #content-area table tr, #content-area table td, #content-area table th {
        max-width: 100px;
        padding: 0.857em 0.587em;
    }
    

    Right click on a cell in the table and select "Inspect" - it will show you where the styling is coming from.

    Allan

  • fergieplfergiepl Posts: 4Questions: 1Answers: 0

    many thanks!

This discussion has been closed.