WP-Table Reloaded Width problem with 2010 Weaver theme

Hi,

thanks for your question.

Very likely, there is some sort of CSS conflict going on between the CSS of the theme, that of WP-Table Reloaded, and your “Custom CSS”.
To find out what exactly is causing the problem, I would need to take a look at the page with the table, where the widths are not working.
Can you therefore please post a link to that page?

Thanks,
Tobias

Thanks Tobias;

Here is the link to the page I am having trouble with;
https://www.calgaryheralddigitalmedia.com/herald-digital-media/current-projects/
It is using the 2010 Weaver “blue” theme.
Here is the custom CSS I am using;
.wp-table-reloaded .even td {
background-color: #FFFFFF;
}
#content tr.odd td {
background-color: #BFEFFB;
}
#content tr th, #content thead th {
background-color: #3D3D3D;
border: 1px solid #FFFFFF;
padding: 4px;
color: #E6EEEE !important;
}

#content table {
width: 50%!important;
}

.dataTables_wrapper {
position: relative;
zoom: 1;
min-height: 102px;
_height: 102px;
clear: both;
}
Here is the code I used to alter the CSS (I got this from your website) to a previous project that worked very well. (I was using Thesis to build this one);
Previous Project URL: https://www.calgaryheralddigitalmedia.com/mediakit/rate-card
Previous Prioject custom CSS:
.wp-table-reloaded .even td {
background-color: #FFFFFF;
}
.wp-table-reloaded .odd td {
background-color: #BFEFFB;
}
.wp-table-reloaded th {
background-color: #3D3D3D;
border: 1px solid #FFFFFF;
padding: 4px;
color: #E6EEEE !important;
}
.wp-table-reloaded {
border-collapse: separate;
border-spacing: 1px;
background-color: #CDCDCD;
margin: 10px 0px 15px 0px;
font-size: 10pt;
width: 100%;
text-align: center;
}
.dataTables_wrapper {
position: relative;
zoom: 1;
min-height: 102px;
_height: 102px;
clear: both;
}

I had tried to use this code in the above Weaver theme but only the first snippet worked. Nothing else did. I know there is a conflict but I am at a loss as to how to override the theme table CSS. I tried using important! but that did nothing. I tried putting the CSS override on the html tab of the page in question but that did nothing. I wonder if I have to use the weaver “advanced options” HEAD section area to alter the css for your plugin?

Cheers ??
Forrest

Hi Forrest,

thanks for the link.

Here’s a small CSS snippet that should help to at least get the columns to have less white space/padding:

.wp-table-reloaded-id-1 td,
.wp-table-reloaded-id-1 th {
  padding: 4px!important;
}

Now, the issue with the table width: The problem simply is that your table is too big for the amount of space that is available. The content in the columns simply requires more width than there is available. All of your columns are basically already shrunk to their minimum width (I can see this when taking a look at the table head cells, where the width matches the length of the longest word in them.).
And as web browsers will not automatically wrap words within words, you have no choice but to remove some of the columns, or choose a theme that has a larger content area.

Regards,
Tobias

Well Duh. I am a moron.
Well OK, but after much discussion with the person in charge of the project, there is no way to pare down the number of cells.
Anyway to perhaps put the chart in to a scrollable div? maybe… perhaps….
lol
Thanks for your help.
Forrest

Hi Forrest,

yes, putting the table in a scrollable div might be a good idea here.
Unfortunately, I don’t have a readily usable solution for this, sorry ??

Regards,
Tobias

So my scrolling thing is working. Is there anyway for me to force a certain column to a fixed width? I want to widen some of them… ??

Hi,

making columns wider should not be a problem. I suggest that you try CSS code like

.wp-table-reloaded-id-1 .column-3 {
  width: 300px!important;
}

for that.
Additionally, it might be necessary to set the table’s entire width to “automatic”, so that it does not interfere, with

.wp-table-reloaded-id-1 {
  width: auto!important;
}

Best wishes,
Tobias

Hmmm, that does not appear to work…
I set both snippets of code as you sent except I changed column 2 to 400 px but nothing changed..

Also you notice the amount or padding on the left from the edge on the content area to the div. Is there a margin or padding setting I need to change or is that a theme setting?
I cannot seem to find that in Firebug…

Here is the current page view btw…

https://www.calgaryheralddigitalmedia.com/herald-digital-media/current-projects/

Hi,

one more thing: Please disable the “Use JavaScript library” checkbox for this table, on the “Edit” screen. The library does not seem to work properly anyways, but as it includes code to change the widths, this might interfere here.

For the padding on the left: Yes, this comes from the theme, as a result of the width and margin settings of the div with the ID “content”, which wraps the page content.
This also has a class .one-column, so I assume that you might be able to change this through selecting the page type or layout in the theme settings or on the page’s “Edit” screen.

Regards,
Tobias