Hi,
in TwentyTen, the usually most needed change is not really a change of the width of the table, but a change of the white-space (padding) in the cells.
Please try this CSS code (just add it to the “Custom CSS” textarea on the “Plugin Options” screen):
.wp-table-reloaded td,
.wp-table-reloaded th {
padding: 4px!important;
}
Regards,
Tobias
Tobias, thank you for a super fast reply! It resolved the issue with table width!
But I still get no result trying to change specific column width.
If I get it right, i have to add “.wp-table-reloaded td”, before every command?
Hi,
no, to change individual column’s width, you need CSS code like this:
.wp-table-reloaded-id-123 .column-1 {
width: 100px!important;
}
(where 123 needs to be changed to the correct table ID).
Unfortunately, changing column widths is not always possible, because a column will always require the width that the longest word in the content requires.
Regards,
Tobias
Hi,
no problem, you are very welcome!
Best wishes,
Tobias
I have a different question, I think, related to table width.
Relevant page = http://freetravelgenius.com/#other
Please look at Column 1. If you are using Windows Chrome, it looks as I intend, the credit card picture fits just perfectly in the width. If you look at any table other than the “Mega bonuses” tab (which is table id#1) from IE9 or Firefox6, there is a lot of extra space in column 1. This is unfortunate since that means some of the other columns are very much bunched up.
It took me a while to notice this since I’ve been using chrome.
I understand each browser has its own algorithms for determining column widths that can override the programmers declarations. However, is there an override to the override or some other trick?
This is what I tried so far in the plugin’s custom css.
.wp-table-reloaded img {
margin: 1px 1px 1px 1px;
border: 0px;
}
.wp-table-reloaded .column-1 {
width:70px !important;
max-width:70px !important;
padding: 1px 1px 1px 1px;
text-align:center;
}
Thanks!
Hi,
that is indeed really odd…
I can confirm that this happens in the other browsers, but don’t really see why…
I assume that it is indeed related to the calculation of the widths, because if one sets the width of the table (currently 100%) to “auto”, the behavior changes, e.g. with
.wp-table-reloaded {
width:auto!important;
}
The browser probably just gives some of the space to each column…
Regards,
Tobias
I think I want to keep the table at 100%. I don’t understand why if I set one column to a certain width it can’t allocate the additional widths to the other columns that don’t have a width set by the author? This is very frustrating.
Another frustrating piece is needing to manually set the height and width of each picture in the table using height= and width= in the img tag. When i tried to set it via a css class, it was ignored (at least by some browsers).
There must be some trick that I am missing.
Hi,
I can totally understand that this is frustrating. Unfortunately, I also don’t see why this happens. The only thing that I can imagine that there is some conflict with/interference by some other CSS code, e.g. in your theme.
To verify that, you could test with the WordPress Default theme, just to see what happens there.
Regards,
Tobias
After hours and hours trying to apply your answers to get a fixed width of columns in the table, the only trickery I found was to put in the firt ceklle of each column a “_____________________________” It was a lot of time to adjust the rignt number of _ but now it’s working !!!
Before that the auto witdh of my 3 colums was approx 60% 15% 35% and I wanted 33 33 33 !
my website is 17agauche.fr
And if now you tell me how to get text starting with less margin left and top it would be fantastic
NB. The content of each cell is a “Widget on Pages” widget with WP-CPL in each !!!
Thanks of lots for your help
Hi,
the reason for why the CSS code is not working for you likely is that you are entering it in the wrong place. It must not go into the “Extra CSS classes” field on the table’s “Edit” screen, but into the “Custom CSS” textfield on the “Plugin Options” screen of WP-Table Reloaded.
To make all three columns equal width you will want to try
.wp-table-reloaded-id-1 .column-1,
.wp-table-reloaded-id-1 .column-2,
.wp-table-reloaded-id-1 .column-3 {
width: 33% !important;
}
To remove the left margin on the blocks in the cells, add
.wp-table-reloaded-id-1 ul {
margin: 0 !important;
}
Regards,
Tobias
Hi Tobias,
Thank you very much for this tip !! You are a genious and I’ll vote for you as Internet President 🙂
I just did’nt see the difference between the two options windows (one for the plugin, one for the current table) !!
Now i’ve seen and everything works beyond my expectations. And more I discovered new options I did’nt know.
Bravo et Merci :))
Hi,
awesome! 🙂 Great that this fixed it so easily. Thanks for the confirmation!
Have fun with the plugin!
Best wishes,
Tobias
