Custom CSS commands Questions

Hi JGravesNBS,

1. For your first question:
Because the <th> of <thead> in your table has been set a width parameter, so the custom css has been overrided.
To set width of a table which has header, you could just set the width of th of header. Please change your CSS to the following to see if it works:

.tablepress-id-2 th.column-1 {
width: 40px;
}

.tablepress-id-2 th.column-2 {
width: 20x;
}

.tablepress-id-2 th.column-3 {
width: 10px;
}

2. For your 2nd question:
The custom css works while I testing it. Maybe you would like to run some further test on this?

3. For your 3rd and 4th questions:
Yes, you could set the entries to show in the “Edit” screen of the table in TablePress page in WordPress Admin Panel. When editting the table, scroll down to section of “DataTables JavaScript Library Features”, then set the number to 50 (default is 10) ather “Pagenation” feature.
And if you want to show all the entries in this table, just tick off the “Pagenation” feature.

Please let me know if my answers solve your problem.

Regards,
Haoxian

Hi,

thanks for your post, and sorry for the trouble.

Before we continue with the “Custom CSS” in your table, we’ll need to clean it up a little bit:
You come commenting text in it, like

=================================== Table 3 = Member Slip Assignments =====================

However, that is not wrapped in /* and */ and thus does not indicate a comment. Instead, it can actually break the code, which is why some of the CSS might not be working.

Also, you should not be setting the padding like this:

.tablepress-id-2 th.column-1 {
	padding: 4px;
}

.tablepress-id-2 th.column-2 {
	padding: 4px;
}

.tablepress-id-2 th.column-3 {
	padding: 4px;
}

as that is responsible for the broken looking sorting arrows in the table header row.
Instead, please change the padding with

.tablepress-id-2 th,
.tablepress-id-2 td {
  padding: 4px;
}

And about the 50 rows: Yes, either change the default number to 50, as Haoxian describes, or deactivate the pagination entirely, to always show all rows, or check out the TablePress Extension at https://tablepress.org/extensions/length-change-all-entry/ that will add an additional “All” entry to the pagination drop down.

Regards,
Tobias

Stille having issues, just trying to bring over the year column over to the left about an inch

Past Commodores table- The following code doesn’t seem to have any affect on column width

https://localhost/lyc/membership/past-commodores/

.tablepress-id-2 th.column-1 {
width: 40px;
}

.tablepress-id-2 th.column-2 {
width: 20px;
}

.tablepress-id-2 th,
.tablepress-id-2 td {
padding: 4px;
}

Hi, JGravesNBS,

Your last link is a localhost one ?? Assuming that you are refering to the previous one.

Because you have style= statements in the <th> elements, like:

<th class="column-1 sorting" role="columnheader" tabindex="0" aria-controls="tablepress-2" rowspan="1" colspan="1" aria-label="Past Commodore: activate to sort column ascending" <strong>style="width: 617px;"</strong>><div>Past Commodore</div></th>
<th class="column-2 sorting" role="columnheader" tabindex="0" aria-controls="tablepress-2" rowspan="1" colspan="1" aria-label="Year: activate to sort column ascending" <strong>style="width: 285px;"</strong>><div>Year</div></th>

I really don’t know why should this happen. Maybe by DataTables Sorting JavaScript function. So maybe we should wait for Tobias to explain this?

Based on above explanation, the code I provide as:

.tablepress-id-2 th.column-1 {
width: 40px;
}

.tablepress-id-2 th.column-2 {
width: 20x;
}

.tablepress-id-2 th.column-3 {
width: 10px;
}

could be simplified as following if the hard-coded width=xxx things resolved:

.tablepress-id-2 .column-1 {
width: 40px;
}

.tablepress-id-2 .column-2 {
width: 20x;
}

If you do not mind, I do have a experimental solution on this. If you want to try, please following the instrution below:
1. Edit this TablePress table in your admin panel;
2. In the edit screen of this table, scroll down to the “DataTables JavaScript …” section;
3. Put the following command line into the “Custom …” field (last line in this section) and save;

"aoColumnDefs": [
      { "sWidth": "40px", "aTargets": [ 0 ] },
      { "sWidth": "20px", "aTargets": [ 1 ] }
    ]

4. Take a look on your page to see if this works.
But I don’t think 40px and 20px are good width for this table. Maybe you could change the numbers to achieve a good look.

Sorry that I could help you more on this problem because I’m not fimiliar with the DataTables JS Library. Please wait for Tobias to help.

Best Wishes,
Haoxian

Thanks Haoxian

Tried both your solutions without success

Still having issues, just trying to bring over the year column over to the left about an inch

https://lasalleyachtclub.com/membership/past-commodores/

Hi, JGravesNBS

Sorry for the trouble.

Could you EDIT this table and check the “Custom Command” field in the section of “Features of the DataTables JavaScript Library” to see if there are other commands? If so, please paste them here. If not, please add the following Custom CSS to TablePress -> Plugin Options -> Custom CSS field and save:

.tablepress-id-2 {
width:auto;
}

Then, post a reply here to let me do a further inspection on the table.

Regards,
Haoxian

This is the code

.tablepress-id-2 {
width: auto;
}

.tablepress-id-2 .column-1 {
width: 80px;
}

.tablepress-id-2 .column-2 {
width: 20px;
}

https://lasalleyachtclub.com/membership/past-commodores/

A little to narrow, OK on descktop, two line per entry on iPhone

Hi, JGravesNBS,

I find the reason which caused this, finally. Please give it a try.

Please fill the following Custom Commands in the “Custom Command” field in the section of “Features of the DataTables JavaScript Library”:

"bAutoWidth": false,
"aoColumnDefs": [
      { "sWidth": "40px", "aTargets": [ 0 ] },
      { "sWidth": "20px", "aTargets": [ 1 ] }
    ]

This would work well. If the width number are not satisfying, please change them directly in the commands. The new command “bAutoWidth”: false will make the auto width feature of DataTables defunctional and should solve our problem.

Hi,

If the columns is too narrow, please increase the width number to a bigger one.

.tablepress-id-2 {
width: auto;
}

.tablepress-id-2 .column-1 {
width: 200px;
}

.tablepress-id-2 .column-2 {
width: 80px;
}

looks good to me.

Hi,

@haoxian: Yes, those extra attributes in the <th> elements come from the DataTables JS library. This can sometimes include a width in the style attribute. Those can be influenced with the “Custom Commands” that you mention, but I generally don’t recommend that. Instead, setting the widths with some “Custom CSS” is better, as the JS will usually also respect that.

Now, for the table at https://lasalleyachtclub.com/membership/past-commodores/ I’d recommend this “Custom CSS” (which, additionally to Haoxian’s suggestion in the previous post would position the pagination and filter fields better):

#tablepress-2_wrapper {
  width: 350px;
}
.tablepress-id-2 .column-1 {
width: 230px;
}
.tablepress-id-2 .column-2 {
width: 120px;
}

Additionally, you might want to check the “Table foot” checkbox on the table’s “Edit” screen, as the last row in your table has a special meaning and should always be the last row.

Regards,
Tobias

Hi, JGravesNBS and Tobias,

Here comes out a perfect solution now. I learned a lot from this question and solution myself. The use of #tablepress-2_wrapper had never come to my head ??
Thanks!

Hi,

good to hear ?? Hopefully this is helpful for JGravesNBS.

Regards,
Tobias

This is the code I have:

.tablepress-id-2 {
width: auto;
}

.tablepress-2_wrapper {
width: 350px;
}

.tablepress-id-2 .column-1 {
width: 230px;
}

.tablepress-id-2 .column-2 {
width: 120px;
}

This is the result:

https://lasalleyachtclub.com/membership/past-commodores/

All is good on desktop & iPhone (WPTouch)

Questions:

1. How would I keep the column spacing the same and just widen the wrapper, ex. chg 350 to 600?

2. What is approx relationship of physical field width and px width

3. How would I figured this out on my own without forum help?

4. Is there additional documentation in addition to whats already posted on Custom CSS obscure code settings?

Great plugin, keep up the great works

Hi,

there’s a slight mistake here. The wrapper is an ID based selector, so please shorten

.tablepress-id-2 {
  width: auto;
}

.tablepress-2_wrapper {
  width: 350px;
}

to just

#tablepress-2_wrapper {
  width: 350px;
}

Only then will the wrapper take effect, and you can change the width as desired (you should then also adjust the individual columns, so that the sum of their widths matches the wrapper’s width).

2. With “physical” relationship, do you mean the width in centimeters or inches? That’s hard to say, unfortunately, as that depends on the resolution/pixel density of the screen of the visitor, and how big a pixel is there.

3. Yeah, this is a bit tricky. First of all, you’d need some knowledge about CSS in general (see e.g. https://www.htmldog.com/guides/cssbeginner/ or google for other tutorials). Then, you can read more about the available CSS selectors in TablePress tables in the TablePress Documentation at https://tablepress.org/faq/documentation-css-selectors-styling/ and finally, you might want to play around with your browser’s developer tools (I recommend the Google Chrome Dev Tools for this.)

4. Besides those links/suggestions and the TablePress FAQ (which you already have used, from what I can see), you could check these forums, which have more CSS examples in many threads.

Regards,
Tobias

Thanks for the helpful information

Is Firebug equivalent to Google Chrome Dev Tools?