formatting data tables

  • Resolved eicken71

    (@eicken71)


    1 year, 9 months ago

    Please have a look at the page:
    The upper part (visitor statistics) is made with WP Statistics shortcodes sitting in the cells of a WordPress table where they can be centered and formatted.

    The lower part (übungsstatistik) consists of two WP Access data tables containing queries on h5pxapicatchu database tables which record user actions on h5p interactive exercises.
    1. I would prefer to centre-align the figures in the tables and can’t find where to set this option.
    2. I would prefer to show column headings only in the top row, not in the bottom row of the tables.
    3. I would prefer to do without the subtext about the number of rows shown and selected.
    4. I would like to define equal column width for both tables and have the headings automatically line-break if they don’t fit.
    Apparently, the premium style manager offers only colours plus three formatting variables that don’t seem to have any effect.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi @eicken71,

    Your data table is too wide to fit into your page. There are three options to solve this issue:


    (1) Make your table responsive
    (2) Enable the horizontal scrollbar
    (3) Add your own css

    Options 1 and 2 just need to be enabled in the table builder.

    Option 3) You can add your own css to any table element. Since the table is too wide, you have to fix that first. This can be done by wrapping the title:

    table.wpda-datatable th {
     whitespace: normal;
    }

    This will wrap your headers and in your situation make the column width of both tables equal.

    To remove the footer just add this css:

    table.wpda-datatable tfoot {
    display: none;
    }

    Each table column contains two classes. A data type class and a class representing the column name. I presume you want to format numbers columns only? Here is the css:

    table.wpda-datatable td.wpda_format_number {
    text-align: center;
    }

    To disable the summary:

    • Edit your Data Table
    • Open the extentions tab
    • Enable arrange, disable summary and save your data table

    Please be aware that your css is applied to all your WP Data Access tables on your website when you add this to your theme. If you prefer to change the css for the tables on this page only, you can use a plugin the Code Manager to add custom css to this page only.

    Does this fix all the issues?

    Thanks,
    Peter

    Thread Starter eicken71

    (@eicken71)

    Hi Peter,
    Thank you for your detailed and informative answer! Sounds good, though requires more learning on my side. So far I have avoided tinkering with CSS. SQL seemed enough of a challenge for the moment. But I will try to apply what you suggest.

    Best wishes,

    Matthias

    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi Matthias,

    If you want to create a general style for all your WP Data Access tables, you can just copy the css I gave you to your theme. There is a short video on this page with instructions:

    https://wpdataaccess.com/docs/data-tables-styling/manual-styling/

    Hope this helps.

    Best regards,
    Peter

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘formatting data tables’ is closed to new replies.