Thin light gray line surrounding all table content

Dear Tobias ~

The following is a link in case you wish to view a page with the occurring light gray line problem, which i forgot to give to you in my previous email:
https://www.lowellreiland.com/ahnirocheleauwp/?page_id=62&preview=true&preview_id=62&preview_nonce=c27ff03c0c

My best,

Lowell

Hi,

thanks for your post, and sorry for the trouble.

My assumption is that there’s a small border in the theme CSS either on the table or even on the image elements. We should be able to find and remove that easily.
Unfortunately, I can’t yet say how, because the link that you posted only points to an unpublished draft of the page, which I can not see (as it’s not public and I only get an error message). Could you therefore please temporarily publish that page?

Regards,
Regards,
Tobias

Dear Tobias ~

I checked the WP site that I am working on and it states that it is “published” and “public”.

Another avenue to reach this web site is if you will do a google search using ” https://www.google.com/search?client=safari&rls=en&q=ahnirocheleauwp&ie=UTF-8&oe=UTF-8 .” The first page that came up for me was the CAMOUFLAGE SERIES which will show you the thin pale gray line around each of the table rows. The thin line is like a “div” surrounding line. The same lines are in the Home page for this site as well.

If that link does not get you into my WP site then attempt a google search using ” ahnirocheleauwp ” as a search phrase.

Earlier this morning I did find on page 26 of 89 of your forum question/answer pages your response to what I believe is the same question that I poised, which you listed as following:

“I have a problem removing the grey frame/border around the whole table.”
Tobias REPLY: “What you are seeing there is a so-called “box shadow”. To remove that from all of your tables, please add this code to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
} “

Unfortunately by adding the code above it did not work for me. I even attempted this code addition to my WP Themes styles.css code.

I used my Dreamweaver program to look inside the code for my WP Themes styles.css earlier today, and after you mentioned the same in your email to me, but did not see any code that may assist us.

You also mentioned the possibilities “that there’s a small border in the theme CSS either on the table or even on the image elements”, but I did not locate such either.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

While we are in communication, in my WP theme (Weaver II, sub-themed twenty-eleven light) I have not been able to have the Responsive design function in the Mobile view: i.e., one of the images becomes smaller in scale than its three neighboring images as text moves over and scrunches the image downward (image #2, left to right); and the rows cascade beyond the right hand side of the screen. The desktop and tablet scales are fine, but the mobile has no responsiveness.

I am on page 54 of your Forum questions/answers, and I have copied the many Forum questions to you about Responsive Design problems , with your responses into a word document for my present and future reference (and other hints/leads that may assist me in later design work in to the same reference document). I have tried every one of your suggestions to other forum persons over the past months, and none of the suggestions have corrected this second dilemma either.

Yes, you do respond quickly, which your Forum members do mention over-and-over; and I do like within the Forum your precise and concise conclusions in your written responses. You do a great service for us. Thank you.

My best,

Lowell

Dear Tobias ~

I just found out that all of the code that I gleaned from your Forums this morning and yesterday I have been placing in the WordPress Weaver II Theme Advanced Options “Custom CSS Rule”. And, I now realize, or it does seem, that your TablePress additional code needs to be placed in your TablePress > Plugin Options > Frontend Options > Custom CSS area (I surmise).

After copying and pasting the code over from the WP Theme into your TablePress Custom CSS area the Responsive/Mobile is still in the same non-working state; and the image/text table has the thin light gray lines removed from around the individual rows, but surrounding the entire columns and rows area has one large exterior thin gray lined box.

Progress, but not there yet.

Also, this morning I came across your TablePress Extensions page. Would downloading the Responsive Tables Extension 1.1 be advisable in order for the Responsive/Mobile to work to its optimum in this present and in my future WP web sites in relationship to tables? If you recommend downloading the Extension 1.1 where do place this code, or rather the three files/folders consisting of coding? For instance, would the three sets of codes be placed within my WP Theme folder with the other php encoding files/folders; or would this coding be placed in your TablePress > Plugin Options > Frontend Options > Custom CSS area?

My best,

Lowell
Santa Fe, New Mexico USA

Hi Lowell,

ah, with the CAMOUFLAGE SERIES hint, I found the page ??

That thin gray line around the entire table is indeed a border. Your theme is adding it to the table in a rather aggressive way, which is why the common code to remove it won’t work out of the box.
Please try again with

#content .tablepress {
  border: none;
}

It should actually not matter if you put that into the “Custom CSS” section in the theme settings or into the “Custom CSS” textarea that TablePress offers. Putting it in TablePress’s “Custom CSS” textarea might be better as it helps you grouping all CSS code that is relevant for TablePress tables.

Now for the responsiveness: Installing the Extension from the TablePress website won’t be that helpful here, as that’s more suited for tables with plain text/numerical data in them, but not for tables with images.
(If you wanted to install it, you’d download it and then install it as a regular WordPress plugin, either via FTP or by using the “Plugins” -> “Add New” -> “Upload” section in the WordPress admin dashboard.)
Instead, the approach that the theme offers (shrinking the images on smaller screens is the best way to go here). Unfortunately, there’s some interference by some CSS that you entered. So, please remove the entire CSS that deals with responsiveness (the content of the files, as well as those blocks with tablepress-id-2responsiveall) from the “Custom CSS” in both TablePress and the theme. After that, we can try to find a better approach.

Regards,
Tobias

Dear Tobias ~

Thank you for your followup with further thoughts on my image Mobile/Responsive with text TablePress table two problem areas.

I removed all of the code that you suggested in your latest correspondence, and all that I left was the following one segments of code, one of which you asked me to place in the TablePress Custom CSS:

.tablepress {
border: none;
}

~~~~~~~~~~~~~~~~~~~~~~~~
Upon experimenting I did find out that adding ” !important ” after the ” border: none ” did actually eliminate the perimeter line gray line of the table boarder! What I was left with was thin gray lines around only each individual table row (which is the first time that I have had the table perimeter thin gray line disappear). Or, in other words the following code, by itself.

.tablepress {
border: none !important;
}
~~~~~~~~~~~~~~~~~~~~~~~~
The following piece of code did not alter the thin gray line effects nor have any effect on the Mobile/Responsive area, nor on the images within the Mobile screen.

.tablepress img {
max-width: 100%;
height: auto;
}
~~~~~~~~~~~~~~~~~~~~~~~
As another two leads for you: Adding the code below (without the ” !important ” did have an effect of removing the ‘internal’ thin gray lines around each table row, which left us with the effect of the appearance of a “div” main content container line, or one thin line around the entire table perimeter. And then, secondly, when I added the code below to the code above with the ” !important ” included, then all of the boarder thin gray lines disappear from the entire page (from around each table row and from the table perimeter).

.tablepress-id-2responsiveall tr,
.tablepress-id-2responsiveall tr,
.tablepress-id-2responsiveall tbody td,
.tablepress-id-2responsiveall tbody td {
border: none !important;
}
~~~~~~~~~~~~~~~~~
As another lead for you in relationship to the Mobile: With the one piece of code that you gave to me, then I included only one of the other (previous) pieces of code one at a time to see that one piece of codes effect upon the web page. The only segment of code that had any other effect on the Mobile/Responsive was the following:

.tablepress-id-2responsiveall thead th,
.tablepress-id-2responsiveall tbody td {
white-space: nowrap;
}

What the above code did was shrink down all four images within each row to the same scale (each), but the images still cascaded beyond the mobile frame to the right side. Prior to the proceeding piece of code the left most image was a medium scale, the second image very small, and the third and fourth images a bit larger (with the latter two right side images cascading off of the mobile page).
~~~~~~~~~~~~~~~~~~~~~~~~~
This appears to be the limit of continued experimentation from my side at this time.

Good luck with finding the proper piece of code that will remove all of the thin gray lines (from each table row and from the entire perimeter of the table), plus the Mobile/Responsive dilemma.

My best,

Lowell

Hi Lowell,

There’s still a lot of TablePress CSS in the theme’s Custom CSS, which needs to be removed.
If possible, I’d like to take a direct look at this on your site. Could you therefore please create a temporary admin account for me and send me the details via email (the address is in the main plugin file “tablepress.php”)? That way, I can investigate this directly. Thanks!

Regards,
Tobias

Dear Tobias ~

The “Responsive Tables Extension” was just now removed from the WordPress weaverII-twenty-eleven-light theme php folder that is inside my Applications MAMP folder. Yesterday, I had forgotten that I had placed two days ago this code into the php folder, and was supposed to be removed yesterday with the other code. At least, now I know that adding such code to a WP Theme does not actually show up and can affect the process!

It appears that you are officially signed on as an WP Administratior in my WP site now. The confirmation information is in the email just sent directly to you.

My best,

Lowell

Hi Lowell,

thanks, I have received your email and the account works nicely.
I now logged-in, cleaned up all the CSS (there was some more in the Advanced Options in Weaver) and added some “Custom CSS” in TablePress that now removes all borders in the table.
Additionally, I changed the table ID back from “2responsiveall” to “2”, as changing the ID wouldn’t have an effect anyways.

With the default CSS of the theme, the images will now shrink in size on small screens. With an HTML table as the underlying structure, this is the best approach here, in my opinion.

Regards,
Tobias

Dear Tobias ~

Thank you so very much for your positive assistance with solving the “box shadow” or the very fine light gray line around the perimeter of each Table Row and the Table Perimeter.

I did notice that the Mobile/Responsive screen still responded in the same manner, with the first, third and fourth column of images the same size, but the second column much smaller, and the third and fourth images not responding to the screen size, but cascading off of the screen to the right.

You mentioned that “With the default CSS of the theme, the images will now shrink in size on small screens. With an HTML table as the underlying structure…” I surmise that you do mean that the table, with mostly gallery-like images in a row, would be best to be constructed as a regular HTML table, rather than using your TablePress format?

Yesterday, I did begin to reconstruct this table as a normal HTML table to be my eventual “Home” page with image links to subpages. The same results in the Mobile/Responsive screen as described above is happening with a regular HTML Table file. When I began this site I started with div’s for the alternating text and image rows. This responded properly in the Mobile view, but the div text description above each image did not line up horizontally quite even, so I gravitated to adding a table format, which is how I found out about your TablePress technique.

Perhaps the Weaver II, twenty-eleven light, WP theme, even though is a Responsive design, just does not work with any type of table design? I will research that possibility next. I may have to go back to working with and adjusting the all “div” format if the table continues to not work today.

At any rate, I am very happy that I found your TablePress technique, and spent a huge amount of time looking through all of your Forum listings from the past year; and reading and making a word document file on the techniques of using TablePress from the Forum questions, that I will be able to refer to in the future when I make a more-standard, non-image table.

Again, thank you for your dedication to having your TablePress Plugin run smoothly for those persons who are adding this technique to their WordPress sites.

A positive, and joy-filled Spring Baseball season ahead for you and your team mates.

My best,

Lowell

Hi Lowell,

no problem! Good to hear that the borders are now gone! ??
The width problem is now related to the text in the cells. Those basically determine the minimum width of the columns. The browser can shrink the image size, but it can’t really do that with the text. In the second column, it just happens that the individual words are shorter, whereas they are longer in the other columns.

would be best to be constructed as a regular HTML table, rather than using your TablePress format?

No, I would actually suggest to construct that gallery design with any sort of table. (TablePress tables are HTML tables as well, so there’s no real difference, besides the extra CSS classes.)
Instead, the approach with <div> elements and proper CSS styling and positioning. The advantage of this approach is that you could easily switch from (e.g.) a four-column layout on big screens to a one-column layout on small screens. That is not possible with HTML tables, due to how they work in browsers.
Now, instead of messing with the HTML code for this yourself, why don’t you try using the existing gallery feature in WordPress?

And just because a theme is labeled “Responsive”, that doesn’t mean that it can make everything responsive. That’s not the theme’s fault even. There are structure for which there is no nice general responsive behavior, and tables are one of those.

I’m also looking forward to the baseball season ?? Season opener is on Sunday ??

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!