Width of First Row

I am also unable to add borders for the table and in between the columns and change color of the header to a gradient color

The center align shortcode, doesnt seem to work as well.

Hi,

thanks for your question, and sorry for the trouble.

Your theme is adding some CSS that interferes here. Please add this to the top of the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.entry-content .tablepress {
  width: 100%;
}

The centering seems to work for me. For the gradient, what CSS have you tried?

Regards,
Tobias

1.Entered it, still not working.

2.Also please advice for the borders between the columns and the table borders as well

3. Can you let me know what CSS to use for the gradient color as well?

Hi,

1. Please force-reload the page in your browser (Shift+F5 or Shift+Ctrl+R).

2. I would actually recommend to not add extra borders, as those make it harder to read the table. If you really must, please try

.tablepress-id-2 th,
.tablepress-id-2 td {
  border: 1px solid #cccccc;
}

3. Please try

.tablepress thead th {
  background-image: linear-gradient(red, yellow);
}

Regards,
Tobias

Cleared all cache, still the issue exists.

Now this happened on the page. The borders still do not appear.

.entry-content .tablepress {
	width: 100%;
}

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

.tablepress thead th,
.tablepress tfoot th {
	background-color: #0005D5;
}

.page-id-178 .tablepress .column-1 {
	width: 50%;
}

.page-id-178 .tablepress .column-2 {
	width: 30%;
}

.tablepress thead th,
.tablepress tbody td {
	text-align: center;
}

.tablepress thead th {
	background-image: linear-gradient(red,yellow);
}

.tablepress-id-2 th,
.tablepress-id-2 td {
	border: 1px solid #cccccc;
}

Hi,

the table certainly has full width for me now, and the first column is much wider than the second column. Please check this again in a “Private”/”Incognito” browser window.

Regards,
Tobias

Yes, the full column is full width. I want it to be adjusted as per the text contents, before it was appearing in different lines.

I want both of them to be adjusted as to their contents, that was my question.

Hi,

please change the CSS

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

to

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

Regards,
Tobias

Hi Tobias,

Doesnt work with the CSS.

I want the colums to be equally accomodate the text in it. If you look at column 1,I dont want it to be like that.

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

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

.tablepress thead th,
.tablepress tbody td {
	text-align: center;
}

.tablepress thead th {
	background-image: linear-gradient(red,yellow);
}

.tablepress-id-2 th,
.tablepress-id-2 td {
	border: 20px solid #cccccc;
}

Hi,

please try this CSS:

.entry-content .tablepress {
	width: 100%;
}
.tablepress-id-2 .column-1 {
	width: 150px;
}

.tablepress thead th,
.tablepress tbody td {
	text-align: center;
}

.tablepress thead th {
	background-image: linear-gradient(red,yellow);
}

.tablepress-id-2 th,
.tablepress-id-2 td {
	border: 20px solid #cccccc !important;
}

Regards,
Tobias

Not working, Sir!

Hi,

please force-reload the page again or try in a Private browsing session. You have correctly added the code and it’s there, you just need to make your browser load it, because something on your site has turned off the automatic cache busting.

Regards,
Tobias

Purged all caches. Doesnt show up. I am in Private Browsing.

Hi,

here’s a screenshot of what I’m seeing: https://imgur.com/a/yhR7el0
Are you seeing something else?

Regards,
Tobias