I made a long table: 5 columns & 25+ rows within a single Visual Editor widget.
There are two problems:
1: As I was developing the table, a full-width line appeared randomly in one of the rows.
I looked at the HTML but cannot see anything wrong.
2: The bottom rows of the table are behind the translucent footer.
Scrolling has no effect.
Any clues?
Adding a new row moves the bottom row down to behind the translucent footer.
My previous comments refer to Firefox.
The effects are similar with IE – except that:
– the full-width line (that I didn’t put there) appears one row higher in the table.
– in IE only 1.5 rows are obscured by the footer whereas 2.5 rows are obscured in IE.
I meant 2.5 rows are obscured in Firefox
I made some images of the problems and put them in a PDF file..
You can see the file with the images at this link: http://1drv.ms/1EF4FN5
I would classify this problem somewhere between “serious” and show-stopping!
Please help.
Thanks
Ken
Hi Ken
If you remove the height property and value from the table style tag, the problem will resolve.
Before:
After:
Hope that helps.
Sorry for the dummy question but where do I find the table style tag?
No problem. Edit the Visual Editor widget, click the Text tab to view the source, you’ll see it there.
Is that a “local” fix “for this table only” or is it a “global fix” = “for all tables made with the Visual Editor widget”?
Ideally there shouldn’t be a width or height property in the style tag. I’m not quite sure how this table was created but assuming you’re using the same method in a new Visual Editor widget, you’d need to edit the new table and do the same.
OK –
Test 1: Remove the height property and leave both rows there (duplicate of first row)
Result 1:
The two horizontal lines are still there.
The bottom of the second table is still merged with the translucent footer.
Test 2: Remove the height property and remove the duplicate VE widget.
Result 2:
There is now only one horizontal line – after the last row in the table. (but not needed or coded)
The bottom of the table DOES NOT merge with the translucent footer.
This is the html for the last row in the table.
To create the table, I used the “Table” drop down that appears after the “Add Media” button but before the first row of icons beginning : B ? …
Thanks for the feedback. If you don’t mind I’m going to take over editing for a moment. Hopefully I can find a speedy solution!
Please check the page now. All looks good to me. I duplicated the Visual Editor widget for testing purposes.
A plugin called TinyMCE Advanced is most likely adding the extra line into the Visual Editor widget that is providing the table creation link. That’s 100%. Looks good to me.
Thanks very much
How do I control the width of each column?
The W3 Schools isn’t clear (except it says “use CSS”).
But I don’t know where to put the CSS to explicitly define the width of each column.
If you look at the table, it seems that the width is being “dynamically” defined by the content but it’s not very stable.
Sometimes the text in one column is right next to the text in the next column
And sometime “long” text creates a new row.
What I want is for all rows to be the same height – and have just one line of text without any wrapping.
You can try something like this under Appearance > Custom CSS:
table tr td { height: 40px; }Adjust as required.
For widths, you can define a global width that will apply to all table cells:
table tr td { width: 100px; }or a global min-width:
table tr td { min-width: 100px; }or you could give each table its own class name and then target that. For example if this was my table:
I could then use the same CSS as before but prefix it with my table class to make it specific to only that table:
table.table-one tr td { min-width: 100px; }Doing this all before pasting into WordPress in your Microsoft app is also another option.