howto set correct column width?

  • Resolved DaDirnbocher

    (@dadirnbocher)


    11 years, 5 months ago

    This thread is the follow up of our discussion started on twitter (https://twitter.com/TablePress/status/380429998533775361)

    I am tablepress-user for less than a week and I tried some settings for the custom css to understand how they would work.

    At the moment I want to have the columns of the table as small as possible, but as big as necessary to have each row in only one line without a word wrap.

    I copied a Table twice and tried different settings.

    For the first table i didn’t use any custom css.

    For the second table I tried to set the fontsize, padding an text-align for the whole table, and a width for the third column.

    For the third table I tried to set additionally all (not only one) column width.

    You can see all tables in one blogpost: https://www.wirarbeitenmitdemnachwuchs.at/2013/09/18/test/

    And now, I do not understand how the custom css works. For example: it seems that the third column looks have nearly the same width although there should be a difference (200px vs. 800px)

    I tried it with different OS (Win7, Ubuntu 12.04, Android) and different browsers (IE, Chrome, Firefox all Win7, Chromium, FF – Ubuntu, Dolphin, Chrome, stock browser – Android) and it looks everywhere nearly the same.

    I would be nice if you could give me a hint.

    P.S.: Just for completeness: text-align seems to work (although they are not really centered or left (as we discussed on twitter).

    https://www.ads-software.com/plugins/tablepress/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post!

    The problem here is not so much the “Custom CSS”. That works well in your case. However, the “Horizontal Scrolling” feature (which is part of the external DataTables JS library that also brings us the Sorting and Filtering functions), does its own calculation of the widths. Due to this, you’ll need to make the CSS that you are setting more “important”, i.e raise its priority. This is done by adding the “!important” keyword after each command, like

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

    Additionally, you might have to set the width of the entire table, as that is influenced by the individual columns:

    .tablepress-id-5 {
	width: 2000px !important;
}

    And about the P.S.: Yes, text-align works fine, but in this case it again influences the calculation of the widths by the “Horizontal Scrolling” JS code. Thus, you might just be unlucky with this table, as using that feature, the table data and your theme just don’t play together nicely out of the box.

    Regards,
    Tobias

    Thread Starter DaDirnbocher

    (@dadirnbocher)

    Thanks. Ok, now i see the effects of changing the width.

    While playing with different values I see some effects, which i can not explain at the moment.

    First, what happens if the width I want to set is to small for the entries of the columns/cells?

    Second, it seems that the width I want to set does not have the same (or even no) effect on the header/footer of the table.

    I added a new copy of the table (.tablepress-id-6) at the top of blog post. Of course the settings (width 10px) is nearly senseless (for the most columns, not for all) but there you can see the difference I mean in header, rows and footer.

    Thread Starter DaDirnbocher

    (@dadirnbocher)

    One more question:

    Is there a faster and easier way to determine the “smallest” possible width for each column than do it by trial and error?

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    if the width that you are setting is too small for the entries, the browser will simply not obey it, but increase the width, until the entries fit. So, basically, you are setting only a “desired” minimum width here.

    Yes, the header does not really fit here, due to some weird CSS conflicts between your theme and the Horizontal Scrolling function of the JS library ??
    As a start, we should also fix the padding on that (just as you have in the table body):

    .tablepress-id-6 th {
  padding: 1px 20px 1px 1px !important;
}

    To determine the smallest possible width, you could use the Developer Tools that most browsers now offer. I recommend the Chrome Dev Tools.

    Finally, we could try to set a different method in the browser to determine the widths: With the “Custom CSS”

    .tablepress-id-6 {
  table-layout: fixed;
}

    your widths commands should have a higher influence.

    Regards,
    Tobias

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘howto set correct column width?’ is closed to new replies.