Hi laskowv,
Not sure I am fully understanding you. All of the tables look OK to me, maybe I’m missing your point?
Column widths inflate and then wrap text
That sounds like normal table behaviour. Could you give me an example of a specific css issue on a table?
Thanks, Matt
Look at Natl# on both tabs. The field is only 5 chars; on tab A it looks fine…on tab B it is wider. The css on both tables is a width of 35px. It seems to always ignore the width css on every table except the the table on the first tab. I assumed it would stay a fixed size.
Oh OK I see. Looks like the problem you have is that your CSS to set the width is this:
.tablepress-id-38 .column-4 {
width: 35px;
}
This specifies that it should ONLY apply to the table with a class of tablepress-id-38. The table on tab two has a class of tablepress-id-35, the third tab has a class of tablepress-id-9, etc, etc. You need to use a style that is common to all of the tables, such as:
table.tablepress .column-4 {
width: 35px;
}
Hope that helps!
Sorry, i had switched A and B around before posting…they are now correct with B as table 38. Now look at the difference. Tab A is table 35. This will not apply to the previous 34 tables; so I am only applying it to the next 24 tables (C-Z).
The fourth column “natl#” should not be that wide now…should it?
OK, so now the CSS you have applied to table-id-38 is still applying to that table, it’s just now in tab B. Tab A doesn’t have any CSS applied to it, so is acting as a standard HTML table. If you want that CSS to apply to all of the tables you will need to change your selector as I stated before to match all tables on the page:
table.tablepress .column-4 {
width: 35px;
}
Ok, compare both of these pages to see….
A on Tab A, B on Tab B
http:// nsdac.org/zzz-for-testing/
B on Tab A, A on Tab B
http://nsdac.org/zzz2/
I understand I have to apply the css to all of my tables, that is not my issue. I have done that for another sight, all 26 tables (A-Z). My issue is that regardless of the 26 tables i entered the css for, it only seems to apply for the FIRST TAB.
My first line of code is:
[tabs title=”” disabled=”false” collapsible=”false” active=”0″ event=”click”]
A on Tab A, B on Tab B:
The table on tab A has a class of tablepress-id-35 which does not have a style to specify how wide column 4 should be.
The table on tab B has a class of tablepress-id-38 which has a style to make column 4 35px wide.
A on Tab B, B on Tab A:
The table on tab A has a class of tablepress-id-38 which has a style to make column 4 35px wide.
The table on tab B has a class of tablepress-id-35 which does not have a style to specify how wide column 4 should be.
If you want a style that applies to ALL tables on the page then you need to write a CSS selector that will match all of the tables on the page, not just one. You currently have the following CSS to specify the width of column 4:
.tablepress-id-38 .column-4 {
width: 35px;
}
You should change that CSS to:
table.tablepress .column-4 {
width: 35px;
}
Then it will apply to all tablepress tables on the page.
I understand I have to apply the css to all of my tables, that is not my issue. I have done that for another sight, all 26 tables (A-Z). My issue is that regardless of the 26 tables i entered the css for, it only seems to apply for the FIRST TAB.
As I have pointed out the CSS is tied to the table you are moving around and the CSS always applies regardless of which tab you have added the table to: The CSS you’ve written is applied to table-38 whether it is on Tab A or Tab B. Try disabling Squelch Tabs and Accordions Shortcodes and I’m sure you’ll see it has no effect on the output of your tables, apart from the obvious change that the tables won’t be in tabs any more. In fact, try adding the following CSS:
.tablepress-id-38 .column-4 {
width: 35px;
background-color: red !important;
}
This will make column 4 bright red for testing, then try moving the tables around each tab, you will find that the red background follows the table around, just the same as the width directive.
I understand what you are saying about the css and table id 38; that is exactly my point.
On http://nsdac.org/zzz2/ – the A tab is table id 38. Look at the spacing of columns 2, 4, & 5.
On http://nsdac.org/zzz-for-testing/ – the B tab is table 38. Now look at the spacing of columns, 2, 4, & 5.
This is what I am trying to figure out. Why is it different when placed on different tabs and the css has remained the same for table 38.
Sorry to harp on this, but I have been trying to get this straight in my head for over 6 hours now. Why would the spacing change when placed on a different tab?
I do ppreciate all of your help.
OK now I see your point. It looks to me like column 1 and column 5 are what are changing size, all the rest seem to remain the same width. I don’t have an answer for you as to why they’re different, I could maybe hazard a guess that it has something to do with the way tabs are built and rendered invisibly (initially) and then shown and so the table sizing voodoo gets done slightly differently, but it would only be a guess.
Column sizes are picked by the browser and the algorithms they use are
a) browser dependent, and
b) generally very complicated.
Basically column widths in tables is an inexact science, unless get explicit with the widths of the columns. So if you set individual widths for all the columns you care about that should solve your problem. I’d be inclined to go for something like:
Col 1: 16%,
Col 2: 7%
Col 3: 17%
Col 4: 7%
Col 5: Leave as auto
If you set the column widths explicitly then I think that should help solve your issue.
Excellent! That worked. LAST question. What is the syntax for stringing these column widths together in one set of statements? I don’t want to have to do:
.tablepress-id-38 .column-1 {
width: 16%;
}
.tablepress-id-38 .column-2 {
width: 7%;
}
.tablepress-id-38 .column-3 {
width: 16%;
}
for all 5 columns for 26 tables!!!!
By the way…Really love this plugin! It works well for other text.
You should be able to do:
table.tablepress .column-1 {
width: 16%;
}
table.tablepress .column-2 {
width: 7%;
}
table.tablepress .column-3 {
width: 16%;
}
Thank you very much for your time and patience.
