Is it possible to do this….

Hi,

thanks for your question, and sorry for the trouble.

Unfortunately, this is not directly possible like this. The main issue are the rowspaned cells in column 4. The DataTables JS library that TablePress uses for the sorting features does not work in tables that have combined cells, unfortunately.
Now, as that column shall be fixed anyways, one trick could be to move that column to a second table that we place directly on the right of the table that holds the data (without rowspaned cells).

For the fixed column 1, you can use this TablePress Extension: https://tablepress.org/extensions/datatables-counter-column/

For what do you need column 3 if it is hidden? (The answer to that decides which method of hiding we should use.)

Centering the table on the page should not be a problem with some “Custom CSS”, but that should be one of our last steps.

Inserting images is possible with the “Insert Image” button below the table.

Regards,
Tobias

Hi,

Thanks for your response.

1) I attempted doing this with 2 tables side by side, but one issue I had was getting the rows to line up in both tables identical. (So it looks good). Maybe you have an idea for that…

2) The reason I want Column 3 hidden is because the table lists people who donated money, and I want to keep the amount of money hidden, but at the same time, I want to use the amount of money to sort the table from Highest to Lowest. Every few days I will add a name and amount to column 2 and 3 and resort the table.

3) I had already installed datatables-counter-column but the row numbers were not showing. I am running WP 4.0, but my theme is very old.

Thanks!

Hi,

1) Lining up the rows should be possible, in general. It might need some extra CSS code to adjust the padding and/or row height as necessary.

2) Ok, thanks for the clarification! That means that we’ll have to keep the data from reaching the client. Therefore, I suggest to hide it on the “Edit” screen, by clicking the checkbox below the column and then using the “Selected columns: Hide” button.
For the sorting, you can then use the sorting arrows that show next to the column letter at the top of the column (on the “Edit” screen).

3) Are you using the latest version of TablePress and that Extension? Both got updated 2 days ago. Also, is the Extension enabled and did you add the Shortcode parameter?

Regards,
Tobias

Hi Tobias,

1) I definitely need help with the CSS. That’s where things are a mess.

2) I have the latest version of both TablePress and the Extension.

This is what my CSS looks like ->

‘.tablepress-id-1,
.tablepress-id-2 {
width: 33%;
float: center;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
border: 1px solid #333333;
}

.tablepress-id-1 tbody td,
.tablepress-id-1 thead th {
}

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

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

.tablepress-id-1 .column-3 {
padding: 14px;
}

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

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

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

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

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

.tablepress-id-2 {
width: auto;
margin: 0 auto 1em;
}’

And this is what my HTML looks like

‘[table id=1 datatables_counter_column=”true” /][table id=2 /]’

And this is what my page looks like ->

Blog Test

Hi,

is the use of DataTables enabled for the first table?
If so, please check if your theme contains a call to the <?php wp_footer(); ?> function right before the closing </body> HTML tag in its footer.php file.

Regards,
Tobias

No “Use DataTables” is not enabled for either Table

<?php
/**
* @package WordPress
* @subpackage OnPaper_Theme
*/
global $mc_layout;
?>

</div>
<div id=”footer”>
<!– <div class=”inside”>
<?php //wp_footer(); ?>
Copyright © <?php echo date(‘Y’);?> <?php bloginfo(‘name’); ?>. All rights reserved.
</div>–>
</div>

</div>

</div> <!– /InnerContents–>
</div> <!– /ContentBody–>

<div id=”ContentFooter”>
<?php print $mc_layout[“Footer”] ?>
</div>

</div> <!– /ContentSection–>
</body>
</html>

Hi,

ok, Use DataTables has to be enabled for the first table, otherwise you will not be able to sort it or add the fixed column.

Then, in the footer.php, please delete the line

<?php //wp_footer(); ?>

Then, add the the line

<?php wp_footer(); ?>

directly before the

</body>

line.

Regards,
Tobias

Hi,

The row numbers disappear when I disable “Enable the visitor to filter or search the table.“

Currently it is enabled.

Changes with Search/Filtering Enabled

Thanks!

Hi,

yes, for this to work, either sorting or filtering has to be enabled. Otherwise, the counter column can not be created. If you don’t want any of the JS functions, I suggest to at least enable filtering, as we can then again hide the search field with some CSS:

#tablepress-1_filter {
  display: none;
}

I have integrated that into your current “Custom CSS” and also shortened that. Please replace your “Custom CSS” with this:

.table-wrapper {
	margin: 0 auto;
	width: 400px;
}

#tablepress-1_wrapper {
	width: 70%;
	float: left;
}

#tablepress-1_filter {
	display: none;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

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

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}
.tablepress-id-2 thead th:first-child,
.tablepress-id-2 tbody td:first-child {
	border-left: none;
}

Additionally, please wrap your table Shortcodes with an extra HTML element, <div>:

<div class="table-wrapper">

[table id=1 /]

[table id=2 /]

</div>

Regards,
Tobias

Hi,

I did not use

#tablepress-1_filter {
  display: none;
}

because I did not know where to place it.

I adjusted the CSS width and percentages to make it look better.

.table-wrapper {
	margin: 0 auto;
	width: 600px;
}

#tablepress-1_wrapper {
	width: 35%;
	float: left;
}

#tablepress-1_filter {
	display: none;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

.tablepress-id-2 {
	width: 50%;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

.tablepress-id-2 thead th:first-child,
.tablepress-id-2 tbody td:first-child {
	border-left: none;
}

And I decided it would be easier to have 4 rows in table_2, and the fix the height of each row, rather than have 100 rows and use #rowspan#.

CURRENT TABLE APPEARANCE

My Shortcose also looks like this

<div class="table-wrapper">

[table id=1 datatables_counter_column="true" /]

[table id=2 /]

</div>

Thanks!

So I changed the CSS to this ->

.table-wrapper {
	margin: 0 auto;
	width: 600px;
}

#tablepress-1_wrapper {
	width: 35%;
	float: left;
}

#tablepress-1_filter {
	display: none;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

.tablepress-id-2 {
	width: 50%;
}

.tablepress-id-2 .row-2 {
	height: 120px;
}

.tablepress-id-2 .row-3 {
	height: 640px;
}

.tablepress-id-2 .row-4 {
	height: 1560px;
}

.tablepress-id-2 .row-5 {
	height: 1560px;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
	border: 1px solid #333333;
	padding: 14px;
}

.tablepress-id-2 thead th:first-child,
.tablepress-id-2 tbody td:first-child {
	border-left: none;
}

And it look good.

All I need to do it get rid of the “Show 100 entries” (to align the 2 tables) And I need to center both tables, then I think we’re done!

Thanks ??

I will play around with the rowheight in order to get it perfect, but that should be easy

CURRENT TABLE VIEW

Hi Tobias,

It looks like I got everything to work. But I did some trial and error to make it look good. First off, in order to get both tables centered on the page, I added a margin to the wrapper ->

#tablepress-1_wrapper {
	width: 35%;
	float: left;
	margin-left: 40px;

And then I did a bunch of other spacing things.

Can you please tell me if this CSS code is okay, or if it is too sloppy and should be cleaned up a bit. Thanks!

.table-wrapper {
	margin: 0 auto;
	width: 600px;
}

#tablepress-1_wrapper {
	width: 35%;
	float: left;
	margin-left: 40px;
}

#tablepress-1_filter {
	display: none;
}

.tablepress-id-1 .column-1 {
	text-align: center;
}

.tablepress-id-1 thead th,
.tablepress-id-1 tbody td {
	border: 1px solid #333333;
	padding: 10px;
}

.tablepress-id-1 thead th,
.tablepress-id-2 thead th {
	text-align: center;
}

.tablepress-id-2 {
	width: 50%;
}

/* each line is 37px in height */
.tablepress-id-2 .row-2 {
	height: 111px;
}

.tablepress-id-2 .row-3 {
	height: 629px;
}

.tablepress-id-2 .row-4 {
	height: 1480px;
}

.tablepress-id-2 .row-5 {
	height: 1480px;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tbody td {
	border: 1px solid #333333;
	padding: 10px;
}

.tablepress-id-2 thead th:first-child,
.tablepress-id-2 tbody td:first-child {
	border-left: none;
}

UPDATE:

Hi Tobias. My Tables look great in Google Chrome, but they are all Misaligned in Firefox!

How do they look to you? And is there a way to make then universally aligned across all browsers and screens?

Thanks.