• Resolved simon_json

    (@simon_json)


    Hi! Thanks for great plugin!
    I have tried to set specific width to my columns – but I can’t – the CSS do not seem to affect the columns. I have read the FAQ, and some topic here on the support forum, but still can’t figure it out.

    Here, among other tables, I wish to set specific width:
    https://www.kvantinvestering.se/exempel-pa-en-aktielista/
    On column 2 and 8.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    What exactly do you want to change in columns 2 and 8? I don’t really see a need for this.

    Regardless, this is most likely not working because there’s no flexibility for the width left in your table. All columns are at their minimum possible column widths already. This is a forced result by the content in the cells. For example, long words like “RAPPORTDATUM” in column 7 or “Informationsteknik” in column 9 define the minimum width of these columns. In sum, these widths are then restricted by the overall width of the content area, and there’s no flexibility left for the remaining columns.

    Regards,
    Tobias

    Thread Starter simon_json

    (@simon_json)

    I want to make columns 2 and 8 wider, I want to be able to set specific width. I have other tables on other pages as well that I want to do this with.

    If I for example put this in CSS:

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

    nothing seem to happen. And I wonder why? How can I target specific columns in specific tables and then set exact width in px? Like in the CSS above.

    Thanks in advice!
    All the best!
    /S

    • This reply was modified 8 years, 4 months ago by simon_json.
    • This reply was modified 8 years, 4 months ago by simon_json.
    • This reply was modified 8 years, 4 months ago by simon_json.
    Thread Starter simon_json

    (@simon_json)

    Hi again!
    This happen even when I have enabled “Enable horizontal scrolling, to make viewing tables with many columns easier.” With this enabled it should be flexibility left for the remaining columns?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    unfortunately, it’s not that trivial, due to how the browsers do the width calculations 🙁
    You could maybe try increasing the priority, by adding the !important flag:

    .tablepress-id-100 .column-1 {
    	width: 120px !important;
    }

    In addition, I recommend to greatly simplify your “Custom CSS”. Instead of centering each column individually, with something like

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

    just change

    .tablepress-id-100 td,
    .tablepress-id-100 th {
    	text-align: left;
    }

    to

    .tablepress-id-100 td,
    .tablepress-id-100 th {
    	text-align: center;
    }

    and all cells in that table will be centered, but the code will be much shorter.

    Regards,
    Tobias

    Thread Starter simon_json

    (@simon_json)

    Thanks!
    Unfortunately adding the !important flag do not work.
    I found this thread: https://ww.wp.xz.cn/support/topic/column-width-in-tablepress-2/
    Can I do something similar like your first answer in that thread?
    On the site the author asks about, it now seem to work fine:
    http://slovanbohnice.cz/index.php/muzi-a-rozpis-zapasu-a-vysledky/
    I wish to accomplish the same result (but being able to sort as well).

    All the best!
    /S

    • This reply was modified 8 years, 4 months ago by simon_json.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    sure, you could also reduce the padding.

    Of course, just using the !important flag on column 1 will not help. That was just an example. If you want to reduce the width of column 1, you could add manual line breaks between the words in the header cell of column 1.
    Then, to maybe influence column 8, you could prohibit automatic line breaks there, with

    .tablepress-id-100 .column-8 {
    	white-space: nowrap;
    }

    Regards,
    Tobias

    Thread Starter simon_json

    (@simon_json)

    Thanks!
    But I want to increase the width of columns.
    Like the second column on this table:
    http://slovanbohnice.cz/index.php/muzi-a-rozpis-zapasu-a-vysledky/

    All the best!
    /S

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    that column could be made wider, because there was more space. In your table, there is not enough space to make columns wider.

    Regards,
    Tobias

    Thread Starter simon_json

    (@simon_json)

    Thanks for reply!
    Could I force the table to scroll, and thereby get more space?
    Can I use “Enable horizontal scrolling, to make viewing tables with many columns easier.” on Features on the DataTables JavaScript library? Or could I use this extension: https://tablepress.org/extensions/responsive-tables/
    and use scroll mode?

    All the best!
    /S

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    by using the scroll mode of the Extension (instead of the checkbox), you might indeed be able to force scrolling to get more space, but I can’t guarantee it. You would probably have to set the width of each column, including the !important flag each time.

    Regards,
    Tobias

    Thread Starter simon_json

    (@simon_json)

    Thanks!
    I tried that but it did not work. Don’t know what I can do?

    All the best!
    /S

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    unfortunately, I’m out of ideas then either 🙁 I’m really sorry.

    Regards,
    Tobias

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Column width’ is closed to new replies.