Table Column Orientation, Alignment and Width

  • Resolved sconica2005

    (@sconica2005)


    7 years, 7 months ago

    Hello,

    I’m new to CSS and WordPress and am looking to insert a table into my webpage. I’ve tried using the CSS coding I’ve found through searching your forum support and think I’ve only managed to confuse myself more. ??

    Basically, I’m looking to create bottom-aligned, centered vertical headings for columns 5-21. I want each column to be as narrow as possible so I can fit as many as possible on the page. I also would like to switch the text in the first column to fit vertically in the spanning space. I would also like to shrink the entire table to make it smaller. I tried changing the font size, but didn’t have much success.

    You can find the table on my (very unfinished) website here: https://www.gshockcentral.com/best-g-shock-watch/

    Here’s the CSS I’ve created so far:
    .tablepress-id-N {
    width: auto;
    margin: 0 auto 1em;
    }

    .tablepress-id-N tbody td {
    font-size: 75%;
    }

    .tablepress-id-2 thead span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: block;
    height: 160px;
    text-align: center;
    }

    .tablepress-id-2 th,
    .tablepress-id-2 td {
    white-space: nowrap;
    }

    .tablepress-id-2 .column-2 .
    tablepress-id-2 .column-3
    .tablepress-id-2 .column-4 {
    white-space: normal;
    }

    .tablepress-id-2 .column-1
    .tablepress-id-2 .column-2
    .tablepress-id-2 .column-3
    .tablepress-id-2 .column-4
    .tablepress-id-2 .column-5
    .tablepress-id-2 .column-6
    .tablepress-id-2 .column-7
    .tablepress-id-2 .column-8
    .tablepress-id-2 .column-9
    .tablepress-id-2 .column-10
    .tablepress-id-2 .column-11
    .tablepress-id-2 .column-12
    .tablepress-id-2 .column-13
    .tablepress-id-2 .column-14
    .tablepress-id-2 .column-15
    .tablepress-id-2 .column-16
    .tablepress-id-2 .column-17
    .tablepress-id-2 .column-18
    .tablepress-id-2 .column-19
    .tablepress-id-2 .column-20
    .tablepress-id-2 .column-21 {
    padding: 2px;
    }

    .tablepress-id-2 .column-5,
    .tablepress-id-2 .column-6,
    .tablepress-id-2 .column-7,
    .tablepress-id-2 .column-8,
    .tablepress-id-2 .column-9,
    .tablepress-id-2 .column-10,
    .tablepress-id-2 .column-11,
    .tablepress-id-2 .column-12,
    .tablepress-id-2 .column-13,
    .tablepress-id-2 .column-14,
    .tablepress-id-2 .column-15,
    .tablepress-id-2 .column-16,
    .tablepress-id-2 .column-17,
    .tablepress-id-2 .column-18,
    .tablepress-id-2 .column-19,
    .tablepress-id-2 .column-20,
    .tablepress-id-2 .column-21,
    {width: 5px !important;
    }

    Thank you so much for spending time to make a great product and offering support to those, like me, who don’t know much about CSS.

    Lonica

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter sconica2005

    (@sconica2005)

    Also, when I preview the table in the WordPress plugin the header column has vertical text, but when I view it on the webpage, I don’t see the vertical text for the header column. Why wouldn’t this transfer over?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    The Preview (as stated there) does not take into the account your theme’s CSS code. Therefore, your commands might be overwritten by the theme.

    The CSS code that you posted contains several small mistakes. For example, you will have to change the N in code like .tablepress-id-N to a table ID (or use .tablepress so that this affects all TablePress tables on the site).

    Also, the use of commas in the list of selectors is not always correct. There has to be a comma between the individual selectors, but not after the last one (i.e. before the {).

    Now, from what I can see, your approach will probably not have the desired effect anyways. If you look e.g. at the “Model Number” column, the problem is not that heading, but the long model numbers like “GSTS120/GSTS130” which are treated as one long word by the browser. Therefore, they determine the minimum width of that column.

    Regards,
    Tobias

    Thread Starter sconica2005

    (@sconica2005)

    Thank you for the swift reply! I made adjustments to the code, as you suggested. It sounds like it might not be possible for me to make a table like I want because of my theme’s code. Is there a way to verify whether this is accurate? Or a way to override the theme’s CSS?

    Thanks!
    Lonica

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, you can override the theme CSS. Basically, your CSS selectors will have to be more precise. That way, the CSS gets a higher priority.
    You could also experiment with adding the !important flag to a command, like

    .tablepress-id-2 .column-21 {
  padding: 5px !important;
}

    to raise the priority.

    Regards,
    Tobias

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Table Column Orientation, Alignment and Width’ is closed to new replies.