Set Table Width

  • Resolved Rich

    (@rpm765)


    1 year, 10 months ago

    I want to post a small table on a page using Publication ID “2”, but no matter what I do in the plugin or what css I add, the table defaults to displaying at 100% page width. I would like to display it no wider than about 300 pixels and use a smaller font.
    This is the page call, using the URL method:

    [wpdataaccess pub_id="2" filter_field_name="year" filter_field_value="1871%"]

    This is the CSS I have added in the “Additional CSS” section of my child theme.

    /* START of WP DATA ACCESS TABLE FORMATTING */
table.wpda-datatable thead th,
table.wpda-datatable tfoot th {
	background-color: #085b8f !important;
	color: white !important;
	border: 1px solid #085b8f !important;
}
table.wpda-datatable {
	background: #ffffff !important;
	border: 1px solid #000000 !important;
}
table.wpda-datatable tbody td {
	border: 1px solid #000000 !important;
}
.wpda-datatable tfoot {
display: none;
}
td.month {
    width: 80px !important;
}
td.received {
    width: 80px !important;
}
td.paid {
    width: 80px !important;
}
/* END of WP DATA ACCESS TABLE FORMATTING */

    HELP!

    • This topic was modified 1 year, 10 months ago by Rich.

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor Kim L

    (@kimmyx)

    Hi @rpm765

    Can you try this CSS code:

    #ktmain .wpda_publication_container{
width: 300px !important;
font-size: 15px !important;
}

    Just update the values. I added the ‘ktmain’ ID so the CSS doesn’t affect other tables on your site.

    Let us know if this works!

    Thread Starter Rich

    (@rpm765)

    Thank you, Kim! The code did work to narrow the table and change the font size, however it changes the width of ALL my WP Data Access tables I have two in this site, and the one involved here is wpdataaccess pub_id=”2″.

    I’m not sure of the role of the #ktmain code in this string. Can you explain it?

    Plugin Contributor Kim L

    (@kimmyx)

    Hi @rpm765,

    Thanks for the update!

    I added the #ktmain ID because it’s the div ID enclosing the table (see here: https://share.getcloudapp.com/7Kujydw6) But now that I think about it, we should use the body class (unique class automatically assigned to a page or post in WordPress) instead.

    Can you try the following:

    .page-id-3733 .wpda_publication_container{
width: 300px !important;
font-size: 15px !important;
}

    Update us if it works. ??

    Thread Starter Rich

    (@rpm765)

    Thanks again, Kim. This code did the trick…almost. If we can make this work, I will be using the wpdataaccess pub_id=”2″ publication on several pages within the site. Will this code work on other pages?

    One other thing…I think the Virtue Premium theme I am using has code in the css to make tables default to expanding to 100% width. Take a look at the page in the site where this problem exists and you’ll see what’s happening. I am using a child theme on this site, so should we override that with css in the child theme?

    The specific code in the virtue.css file is:

    table {
 max-width:100%
}
table {
 border-collapse:collapse;
 border-spacing:0;
 background-color:transparent
}
    • This reply was modified 1 year, 10 months ago by Rich.
    • This reply was modified 1 year, 10 months ago by Rich.
    Thread Starter Rich

    (@rpm765)

    UPDATE:

    I have contacted Kadence Themes about the table width 100% default problem. We’ll see what they have to say.

    Plugin Contributor Kim L

    (@kimmyx)

    Hi Rich,

    Just received feedback from Peter that all WP Data Access tables will have a unique ID which consists of the table name and publication id. If a table is shown multiple times on the same page, an extension is added to the ID consisting of an underscore and the sequence number (_2, _3, and so on). The table is also wrapped in a div with a unique ID. The ID of the container consists of the table ID extended with _wrapper.

    So in your case, the table for your wpdataaccess pub_id=”2″ is “cashaccounts2” (see here: https://share.getcloudapp.com/6quNLJJe) which we then can use for styling this specific table instead. This way, you can add this table on more pages using consistent styling.

    The CSS code should now be:

    #cashaccounts2_wrapper{
width: 150px !important;
font-size: 10px !important;
}

    Regarding your Virtue theme styling, I think this is set because the theme is made using html5 bootstrap, which utilizes columns to ensure responsiveness. It’s a good idea that you contacted them, since they know more about the theme and will be able to guide you on how to manage column layouts.

    Let us know if we can help with anything else. ??

    Thread Starter Rich

    (@rpm765)

    Kim, you and Peter provide some of the BEST tech support I have ever experienced. Thank you so much! This new code works perfectly.

    I also heard from Kadence about the 100% table width default. They sent me a couple of lines of CSS that fixed that problem, too. So…this one is SOLVED!

    Plugin Contributor Kim L

    (@kimmyx)

    Hi Rich,

    Thanks for the update, and for the kind words! We try to do our best! ??

    Glad to know the code works, and Kadence was able to assist you as well!

    I’ll go ahead and mark this as resolved. ?? As always, feel free to make a new post if you have new questions!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Set Table Width’ is closed to new replies.