TablePress ignoring column width setting.

Resolved

(@robertjm)

I have a two-column table (ID=1 in the code below), which has a 225px wide photo at the top in row one, followed by two rows of text. The third row is a person’s biography, and due to the size of the font, it looks like the text from bio 1 is running into bio 2, rather than straight down.

Tried controlling that with custom css in the TablePress plug-in, telling it that that text in the column should also be 225px wide max. However, it seems to be ignoring it at this point. Below is the full custom text, in case someone sees something that’s rewriting the row width for some reason.

.tablepress-id-1 .column-1,
.tablepress-id-1 .column-2 {
	width: 225px !important;
}

.tablepress-id-1,
.tablepress-id-2,
.tablepress-id-3,
.tablepress-id-4 {
	margin: 0;
	border: 0;
	border-bottom: none !important;
	background-color: transparent;
}

.tablepress-id-1,
.tablepress-id-1 tbody,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th,
.tablepress-id-2,
.tablepress-id-2 tbody,
.tablepress-id-2 tr,
.tablepress-id-2 tbody td,
.tablepress-id-2 thead th,
.tablepress-id-2 tfoot th,
.tablepress-id-3,
.tablepress-id-3 tbody,
.tablepress-id-3 tr,
.tablepress-id-3 tbody td,
.tablepress-id-3 thead th,
.tablepress-id-3 tfoot th,
.tablepress-id-4,
.tablepress-id-4 tbody,
.tablepress-id-4 tr,
.tablepress-id-4 tbody td,
.tablepress-id-4 thead th,
.tablepress-id-4 tfoot th {
	border: none;
	padding: 4px !important;
}

.tablepress-id-1 .row-1 td,
.tablepress-id-1 .row-2 td,
.tablepress-id-2 .row-1 td,
.tablepress-id-2 .row-2 td,
.tablepress-id-3 .row-1 td,
.tablepress-id-3 .row-2 td,
.tablepress-id-4 .column-1,
.tablepress-id-4 .column-2,
.tablepress-id-4 .column-3 {
	text-align: center;
	border: none;
	background-color: transparent;
}

.tablepress-id-1 .row-3 td,
.tablepress-id-2 .row-3 td,
.tablepress-id-3 .row-3 td {
	text-align: justify;
	border: none;
	background-color: transparent;
}

.tablepress-id-1 th,
.tablepress-id-1 td,
.tablepress-id-2 th,
.tablepress-id-2 td,
.tablepress-id-3 th,
.tablepress-id-3 td,
.tablepress-id-4 th,
.tablepress-id-4 td {
	font-family: 'Open Sans', arial, serif;
	font-weight: 600;
}

https://ww.wp.xz.cn/plugins/tablepress/

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

11 years, 2 months ago
Hi,

thanks for your post!

Can you please also add
```
.tablepress-id-1 {
  width: auto;
}
```
to tell the browser to not make the table cover full width of the content area?

If that’s not it, can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias
Thread Starter robertjm
(@robertjm)

11 years, 2 months ago

Thanks for the quick response Tobias. I added that, though it didn’t have any impact to fix the issue.

Here’s a link to the page in question.

There are four different tables listed there. Only the top one currently has the bio information in it, which illustrates the problem I’m having.
Plugin Author Tobias Bäthge
(@tobiasbg)

11 years, 2 months ago
Hi,

I had actually meant to add that CSS in addition to what you were already using for the column widths 🙂

But I think another approach might be even better: You could set percentage width. For example, in the tables with two columns, you set
```
.tablepress-id-1 td {
  width: 50%;
}
```
whereas in the tables with three columns, you use
```
.tablepress-id-2 td {
  width: 33%;
}
```
Regards,
Tobias
Thread Starter robertjm
(@robertjm)

11 years, 2 months ago

Thanks!

Once I did the latter with the percentages, and increased my padding entry, it looks much better.

Just in time to redo the whole thing because the client wants to rearrange the people. 🙂

Is that percentage the percentage of the “primary” area of the theme’s page? If so, I may have problems when the images are smaller than the top shots.

I’ll leave this unresolved so you can respond and close it later.

Later,

Robert

Plugin Author Tobias Bäthge
(@tobiasbg)

11 years, 2 months ago

Hi Robert,

good to hear that this helped!

The percentages for the column widths are in relation to the width of the table. And the table (by default, i.e. without that CSS from my first reply) is 100% of the content area of the theme.
Alternatively, you can also set pixel values for the widths of the columns, as well as for the width of the images, if their size causes problems later.

Regards,
Tobias
Thread Starter robertjm
(@robertjm)

11 years, 2 months ago
Almost ready to mark this one resolved.

I’ve been able to get the text properly justified and to the width I want, with photos properly centered (photos on pages are different pixel densities which is why they’re displaying different sizes).

However, I’ve got one table, at the very top of the page, which is causing me trouble still.

Here’s the link to the page, once again.

If I set my custom plug-in CSS code this way I get the proper width of text and the photo is properly centered within the table. HOWEVER, the table is basically all the way at the left side of the page.
```
.tablepress-id-1 {
	width: 500px !important;
}
```
If I remove the !important, it centers the table properly on the page. However, it totally ignores the 500px limit, and the text is sprawled edge-to-edge.

For the life of me, I can’t see what I’m missing to get the desired width, and properly centered on the page. Below is the full custom CSS for the plug-in, in case that helps triage.
```
.tablepress-id-1 {
	width: 500px !important;
}

.tablepress-id-5 {
	width: 300px !important;
}

.tablepress-id-1,
.tablepress-id-2,
.tablepress-id-3,
.tablepress-id-4,
.tablepress-id-5,
.tablepress-id-6 {
	margin: 0;
	border: 0;
	border-bottom: none !important;
	background-color: transparent;
}

.tablepress-id-1,
.tablepress-id-1 tbody,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th,
.tablepress-id-2,
.tablepress-id-2 tbody,
.tablepress-id-2 tr,
.tablepress-id-2 tbody td,
.tablepress-id-2 thead th,
.tablepress-id-2 tfoot th,
.tablepress-id-3,
.tablepress-id-3 tbody,
.tablepress-id-3 tr,
.tablepress-id-3 tbody td,
.tablepress-id-3 thead th,
.tablepress-id-3 tfoot th,
.tablepress-id-4,
.tablepress-id-4 tbody,
.tablepress-id-4 tr,
.tablepress-id-4 tbody td,
.tablepress-id-4 thead th,
.tablepress-id-4 tfoot th,
.tablepress-id-5,
.tablepress-id-5 tbody,
.tablepress-id-5 tr,
.tablepress-id-5 tbody td,
.tablepress-id-5 thead th,
.tablepress-id-5 tfoot th,
.tablepress-id-6,
.tablepress-id-6 tbody,
.tablepress-id-6 tr,
.tablepress-id-6 tbody td,
.tablepress-id-6 thead th,
.tablepress-id-6 tfoot th {
	border: none;
	padding: 15px !important;
}

.tablepress-id-1 .row-1 td,
.tablepress-id-1 .row-2 td,
.tablepress-id-2 .row-1 td,
.tablepress-id-2 .row-2 td,
.tablepress-id-3 .row-1 td,
.tablepress-id-3 .row-2 td,
.tablepress-id-4 .column-1,
.tablepress-id-4 .column-2,
.tablepress-id-4 .column-3,
.tablepress-id-5 .row-1 td,
.tablepress-id-5 .row-2 td,
.tablepress-id-6 .row-1 td,
.tablepress-id-6 .row-2 td {
	text-align: center;
	border: none;
	background-color: transparent;
}

.tablepress-id-1 .row-3 td,
.tablepress-id-2 .row-3 td,
.tablepress-id-3 .row-3 td,
.tablepress-id-5 .row-3 td,
.tablepress-id-6 .row-3 td {
	text-align: justify;
	width: 250px;
	border: none;
	background-color: transparent;
}

.tablepress-id-1 th,
.tablepress-id-1 td,
.tablepress-id-2 th,
.tablepress-id-2 td,
.tablepress-id-3 th,
.tablepress-id-3 td,
.tablepress-id-4 th,
.tablepress-id-4 td,
.tablepress-id-5 th,
.tablepress-id-5 td,
.tablepress-id-6 th,
.tablepress-id-6 td {
	font-family: 'Open Sans', arial, serif;
	font-weight: 600;
}
```
Plugin Author Tobias Bäthge
(@tobiasbg)

11 years, 2 months ago
Hi,

please try this:
```
.tablepress-id-1 {
	width: 500px !important;
	margin: 0 auto 1em !important;
}
```
That will reduce the width of the table and centers it again.

(By the way, no need to post your “Custom CSS”, I can see that in page 🙂 ).

Regards,
Tobias
Thread Starter robertjm
(@robertjm)

11 years, 2 months ago

That did the trick! Thanks much.

Guess I didn’t think about you seeing the custom css. I’ll remember that for brevity’s sake next time. 🙂

Plugin Author Tobias Bäthge
(@tobiasbg)

11 years, 1 month ago

Hi,

very cool! Thanks for the confirmation!

Best wishes,
Tobias

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

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘TablePress ignoring column width setting.’ is closed to new replies.

Tags