Support » Plugin: TablePress » [Plugin: TablePress] Column Widths

  • Resolved ganaxi


    Hi, Tobias:

    Thanks for the great support for your plugins.

    A couple of points/questions:

    1> I am trying to set the column width in my Tables, and have been unable to do so after trying some of the directions in the forum.
    So, far I have done this:
    Added following to Custom CSS in Plugin Options:
    .tablepress td column-1 {
    width: 25px!important;

    Added following to Custom Commands for specific table
    “aoColumnDefs”: [ { “bSortable”: false, “bAutoWidth”: false, “aTargets”: [ 4, 5, 6, 7 ] } ]

    the key above being the “bAutoWidth”

    Basically, I am trying to limit the column width to less than the word content would occupy with the following:

    .tablepress td {
    font-family: Arial;
    font-size: 11px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #344f75!important;

    All of the above, together, and separately, either way, it didn’t work. The column width does not change less than or more than the content width, no matter what I do.

    2> I have two to three kinds of tables on my website, that use tablepress, each set being over a 100 tables each. I can use the code

    .tablepress-id-N {…
    to style the width, etc, for each table
    But is there a way to do all of them in a batch, i.e.
    .tablepress-id-1,3,5,7 {…
    and then
    .tablepress-id-2,4,6,8 (….

    insteading of, in my case, having a couple of hundred of these lines of code..

    3> Similar to column width, as in #1 above, I am also unable to reduce vertical height, no matter what I try, using the suggestions on the forum. I do not have any padding, but I am trying to space the content closer in the table, than it does by default.

    Thanks, as always, for your prompt replies.



Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg



    thanks for this question.

    For 1.)
    From my experience over the years, I don’t think that this is possible with ease. One of the characteristics of tables is that they will always expand to accommodate their contents, regardless of the width the columns are set to. Thus, you can’t make a column smaller than its widest content.
    (Now, this might not be true if a different method of determining the width is used in the browser. The keyword here is the table-layout: fixed; CSS property. Unfortunately, I don’t have any experience with that, and thus can’t help with it. I suggest that you check out Section 11.1.1 (Width) on for more about this. Maybe it is as easy as adding that CSS property to your table.)
    (Further sidenote: The selector .tablepress td column-1 { is wrong. This needs to be .tablepress .column-1 {.)

    For 2.)
    For that, you can use “Extra CSS classes”. For example, for your two (or three) different kinds of tables, choose CSS classes like


    or something like that.
    Then you can use these in your CSS, like

    .tablepress-table-type-1 td {
      /* CSS for all cells of the tables of kind 1 */
    .tablepress-table-type-2 td {
      /* CSS for all cells of the tables of kind 2 */

    Then you just have to add the respective CSS class to each table, in the “Extra CSS classes” field on its “Edit” screen, i.e. tablepress-table-type-2 (yes, without the . at the beginning here).

    For 3.)
    This is hard to say without seeing the table. Probably, there are line breaks in the cell, which can happen if you use HTML code in table cells. Can you post a link to the page with the table, so that I can verify this?


    Thanks, Tobias.

    For now, I am going to revert back to the table format whereby the text wraps, so the above issues do not crop up.



    Plugin Author TobiasBg



    yeah, that might be the easiest thing here. Sorry to hear that you are affected by this limitation of HTML tables.

    Best wishes,

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: TablePress] Column Widths’ is closed to new replies.