Style custom columns in admin panels (especially to adjust column cell widths)

Question

I am using Wordpress as a CMS for a project which makes extensive use of custom post types. I need to display columns in admin panels for each custom post type in a different way.

I've already created the necessary columns and populated them. What I need to do is to adjust the CSS a bit. Most importantly I'm trying to tweak the width of certain columns. For example I don't need a column listing the post ID to be as wide as the post name.

I enqueued a stylesheet in the admin panels for my custom post types but I can't get it right to style the column widths.

I tried to adjust the max-width of th or td elements, but it's ineffective. From firebug I can see the css style is there, but it's doing nothing.

While I could find a lot of tutorials to add/edit custom columns, I didn't really gather much information about how to style such columns. Any hint?

Thank you!

Answer 1

I found a solution that works for me!

I dropped this code in functions.php :

add_action('admin_head', 'my_column_width');

function my_column_width() {
    echo '<style type="text/css">';
    echo '.column-mycolumn { text-align: center; width:60px !important; overflow:hidden }';
    echo '</style>';
}

Answer 2

Thanks Nicusor: Works great. I was able to change the width of selected columns on the Posts panel (e.g Title, Author, Categories) with your solution as follows:

add_action('admin_head', 'my_admin_column_width');
function my_admin_column_width() {
    echo '<style type="text/css">
        .column-title { text-align: left; width:200px !important; overflow:hidden }
        .column-author { text-align: left; width:100px !important; overflow:hidden }
        .column-categories { text-align: left; width:100px !important; overflow:hidden }
    </style>';
}

Answer 3

You should be able to set the column width using CSS quite easily. You can use the .column-{name} class to apply styles to the column cells (both th and td). For example:

.column-mycolumn { width:20%; }

Make sure you don't have other styles overruling your column width because of CSS specificity rules. Also, long words without spaces or large images could force the column to be wider than specified in some browsers.

Answer 4

You can try this solved your problems:

add_action('admin_head', 'my_admin_custom_styles');
function my_admin_custom_styles() {
    $output_css = '<style type="text/css">
        .column-date { display: none }
        .column-tags { display: none }
        .column-author { width:30px !important; overflow:hidden }
        .column-categories { width:30px !important; overflow:hidden }
        .column-title a { font-size:30px !important }
    </style>';
    echo $output_css;
}

Answer 5

When adding custom columns, you can also directly insert a small style snippet which you can use to size the column. A bit dirty, but saves another filter / call:

/**
 * Add custom columns to submission list
 *
 * @param $columns
 *
 * @return mixed
 */
function submission_add_columns( $columns ) {
    $columns['name']    = 'Name';
    $columns['iban']    = 'IBAN<style>.column-iban { width: 150px !important;}</style>';
    $columns['bic']     = 'BIC<style>.column-bic { width: 100px !important;}</style>';
    $columns['receipt'] = 'Receipt<style>.column-receipt { width: 175px !important;}</style>';
    $columns['status']  = 'Status<style>.column-status { width: 75px !important;}</style>';
    $columns['action']  = 'Action<style>.column-action { width: 225px !important;}</style>';
    // add the thickbox library
    wp_enqueue_style( 'thickbox' );
    wp_enqueue_script( 'thickbox' );

    return $columns;
}

add_filter( 'manage_edit-submissions_columns', 'submission_add_columns' );