Getting Started implementing the basic table in Wordpress - Layout is wrong

leomondeo

Hello,

I am doing the first steps with data tables and wanted to get a simple example to run.
I tried the example at https://datatables.net/blog/2019-02-15#WordPress-Installation

In Wordpress I created a site and used the block editor.
Created a Block with individual HTML and pasted the table code in
Created another block and

put the rest in

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css">

$(document).ready( function () { $('#example').DataTable(); } );

The table is displayed but the font looks crazy. I had the feeling that the problem is related to the css but the above link
https://nightly.datatables.net/css/jquery.dataTables.css
exists.

If I let everything away and only use the table the formatting is the same.

I use wordpress 5.6.2 with customizr Pro theme.

Also tried to implement the zero configuration example at https://datatables.net/examples/basic_init/zero_configuration.html

Here I have the same effects. I have downloaded nothing, because I think this is automatically done by CDN.

It seems to me that I am doing something wrong in priciple. What am I missing?

Thanks so much for your help.

tangerine

Are you using TablePress? It's explained in the blog link.

leomondeo

No I used the manual mode as I need additional search fields. Therefore I wanted to deploy the 5k example finally as this contains a user defined search creator. But first My goal was to get the basics working.

colin

Most WordPress styles use BootStrap4, so it would be worth checking that style is being used by DataTables (or even try BS3 styling). If that doesn't help, can you link to your page please so we can take a look,

Colin

leomondeo

Was able to solve it
Changed <table id="example" class="example nowrap"

somehow example in the class statement was used by Wordpress changed it to another name and the big letters are gone.

<table id="example" class="example123 nowrap"