Tablepress CSS Column Selector

Tablepress CSS Column Selector Plugin adds the number of columns in a Tablepress table as a class on the table. This then allows the table to be styled with standard CSS based on the number of columns.

The origin of this plugin was when I had a page with many tables, and the columns just didn’t line up how I wanted. My options were to manually add the column widths in tablepress or to style them with CSS.

Result

Initial Code
<table id=”tablepress-2-no-107″ class=”tablepress tablepress-id-2″>

After Plugin (for a 3 column table)
<table id=”tablepress-2-no-107″ class=”tablepress tablepress-id-2 column-3“>

Typical CSS

You will need to manually add the CSS as per your requirement, but can now target the number of table columns. In the example below I have the last column always set to 20% (in this particular case it was so a button in the table displayed in a single column).

table.tablepress-id-2.column-2 td.column-1{width:80%;}
table.tablepress-id-2.column-2 td.column-2{width:20%;}
table.tablepress-id-2.column-3 td.column-1{width:54%;}
table.tablepress-id-2.column-3 td.column-2{width:26%;}
table.tablepress-id-2.column-3 td.column-3{width:20%;}
table.tablepress-id-2.column-4 td.column-1{width:54%;}
table.tablepress-id-2.column-4 td.column-2{width:13%;}
table.tablepress-id-2.column-4 td.column-3{width:13%;}
table.tablepress-id-2.column-4 td.column-4{width:20%;}

To download this plugin (it got stuck in WordPress review and I haven’t been able to get in touch with the person that keeps emailing me). You can download directly from https://www.dropbox.com/s/kpzfgggqjscf2k6/tablepress-css-col-selector.zip?dl=1

Please note that this is not the greatest thing to do securitywise! The code though is below if you want to copy and paste it into your functions.php file instead.

// JavaScript Document
jQuery(document).ready(function(){
		var numbertablesonpage = jQuery("table.tablepress").length;

var tableid = [];
jQuery("table.tablepress").each(function () {
   tableid.push(jQuery(this).attr("id"));
});
		
	jQuery.each( tableid, function( index, value ){
    	var tableidnow = tableid[index];
		var colclass1 = jQuery("table#" + tableidnow + " tr.row-2 td:last-child").attr('class');
		jQuery("table#" + tableidnow ).addClass(colclass1);
	});
	
});

This is a javascript document containing some jquery that should be saved separately in the active theme file /js/ tablecolresizer.js

You can see that all it does is looks at a table that is loading, then it takes the last cell of the second row, and copies the class, which is the column number. It them applies that same class to the top level table, giving you an way to style the table based on the number of columns it contains.

To add this file into your theme, add the following into your themes functions.php file.

// The following adds the script that allows a tablepress table to check the number of columns int he table
function tp-col-indicator() {
    wp_enqueue_script( 'tp-col-indicator', 'https://YOUR-SITE/wp-content/themes/YOUR-THEME/js/tablecolresizer.js', array( 'jquery' ), 1.0, true );
}
add_action( 'wp_enqueue_scripts', 'tp-col-indicator' );

Obvious replace YOUR-SITE and YOUR-THEME in the code above.