table width

Hi,

thanks for your post, and sorry for the trouble.

All that should be necessary here is to maybe choose a different “page template” (besides “Full-width”) on the “Edit” screen of the page.

A different way would be to add this “Custom CSS” on the “Plugin Options” screen of TablePress:

.tablepress-id-1 {
  width: 60%;
  margin: 0 auto 1em;
}

Additionally, please uncheck the “Use DataTables” checkbox on the table’s “Edit” screen as you have already turned off the individual features anyway.

Regards,
Tobias

Thank you Tobias.
But the last code u sent me did not work. Still the width of the table fixed to the full page.

Any other solution?

THANK YOU TOBIAS.

IT WORKED. I JUST CHOSE THE WRONG TABLE.

THANK YOU A BUNCH.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

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

I am trying to make the top 2 tables on this page at 60% using the code above, but it is not working.
https://canandaiguamedical.com/test/internal-medicine/
The top blue table and the table under it are still full width.

Hi,

thanks for your post, and sorry for the trouble.

Due to some CSS that your theme adds, you will need to make the CSS selector more specific. Please try again with

.entry .tablepress-id-3,
.entry .tablepress-id-4 {
	width: 60%;
	margin: 0 auto 1em;
}

By the way: Using a one-cell table for layout purposes like this is not really a good idea. I suggest to maybe simply use an HTML element like <blockquote>.

Regards,
Tobias

I can’t get column 6 to widen to its CSS setting which is set to the same px width setting as columns 3-5 (75px).

https://www.wptest2.agilebts.com/zoho-implementation-plans/

Here is the CSS section…

.tablepress-id-6 .column-3 {
width: 75px;
text-align: center;
}

.tablepress-id-6 .column-4 {
width: 75px;
text-align: center;
}

.tablepress-id-6 .column-5 {
width: 75px;
text-align: center;
}

.tablepress-id-6 .column-6 {
width: 75px;
text-align: center;
}

My theme is at full page width and I also tried the CSS to reduce the table size but the uneven column spacing persists:

.tablepress-id-6 {
width: 90%;
margin: 0 auto 1em;
}

What am I overlooking?

Hi,

you are trying to make all of those columns 75px wide, but the content in them require much more pixels (for example, the string “$199/month” requires 159 pixels already).

I suggest to remove

.tablepress-id-6 {
  width: 90%;
  margin: 0 auto 1em;
}

again, and then replace the other CSS for this table with the shorter

.tablepress-id-6 .column-3,
.tablepress-id-6 .column-4,
.tablepress-id-6 .column-5,
.tablepress-id-6 .column-6 {
  width: 15%;
  text-align: center;
}

The columns should then have the same width.

Regards,
Tobias

I tried making a table on:
https://science-network.tv/observations-and-variables/
The table is 100% wide but I want it to adapt and be smaller. I tried the following additions in the plugin options:

.tablepress-id-1 {
width: 60%;
margin: 0 auto 1em;
}

#wrapper .tablepress-id-1 {
width: auto;
}

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

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

I tried them one at the time but none of them makes the table more narrow. Any other suggestions?

Hi,

thanks for your question, and sorry for the trouble.

Can you please try again after turning off the “Use DataTables” checkbox on the “Edit” screen of the table? As you are not using any of the features, that’s unnecessary and can interfere here.

After that,

#wrapper .tablepress-id-1 {
  width: 60%;
  margin: 0 auto 1em;
}
.tablepress-id-1 .column-2 {
  width: 10px;
  padding: 4px;
}

should have an effect.

Regards,
Tobias

This seems to work fine. Thanks!

I assume you could remove “-id-1” and make these settings global. That would only work if all your tables are of similar width. The other alternative is to set this parameter separate for each table.

I plan to use a lot of tables, some very small and some very large and crowded. Instead of setting a fixed width like 60% would it be possible to use an “auto” function so that large crowded tables automatically takes up 100% in width while very small tables may take up less than 60%?

Hi,

no, I’m not aware of a CSS property that will make the table use 100% or 60% based on its size.
However, there’s maybe a workaround here for you that saves you from having to duplicate the CSS code for each table: You could use “Extra CSS classes” (on the table’s “Edit” screen). With that, you could assign each table a CSS class like “tablepress-width-60” or “tablepress-width-100” and then use that in the CSS, like

#wrapper .tablepress-width-60 {
  width: 60%;
  margin: 0 auto 1em;
}
#wrapper .tablepress-width-100 {
  width: 100%;
}

Does that make sense?

Regards,
Tobias

I created several classes (40%, 60%, 80% and 100%). I simply assign each table a class as you suggested and it seems to work fine.

Hi,

very cool! That’s great news! ??

Best wishes,
Tobias