• Hi,

    First of all, I would like to Thank Tobias for preempting numerous queries by diligently replying to varies queries raised by users.

    Coming to my issue, I have 2 queries:
    1. I am using auto width to adjust table width across all tables. Is it possible to add some white space to increase the column widths marginally? Using a padding increases the row height as well, which I do not want. I am using the following code:
    .tablepress {
    width: auto;
    padding: 30px;
    }

    2. Is it possible to left align column 1 for all tables and center align all the remaining columns for all the tables by default? I know it can be done by setting center align for all the columns by default and then manually left aligning column 1 for each table. I want to avoid manually doing it for all tables.

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • vtxyzzy

    (@vtxyzzy)

    It is very difficult to help with this type of problem without being able to view the site. If you post a link to your site where the problem can be seen, someone may be able to help you.

    Thread Starter chetandhawan

    (@chetandhawan)

    Here’s the link to the site
    http://mycampusticket.com/exams/study-abroad/

    vtxyzzy

    (@vtxyzzy)

    Try this to add horizontal padding to your table cells:

    .tablepress thead th, .tablepress tfoot th, .tablepress tbody td {
        padding: 2px 15px;
    }

    The first size (2px) affects the top and bottom padding. The second (15px) affects the left and right padding. You can actually specify all four widths separately by giving 4 values in the order (top right bottom left).

    You can put the default CSS for all cells in that same rule and follow it with a rule to style specific rows, columns, or cells. So, to have all columns except the first centered and the first left aligned, use this:

    .tablepress thead th, .tablepress tfoot th, .tablepress tbody td {
       padding: 2px 15px;
       text-align: center;
    }
    .tablepress thead th.column-1, .tablepress tfoot th.column-1, .tablepress tbody td.column-1 {
       text-align: left;
    }

    Since the last rule found for an element sets the style, and the ‘text-align: left;’ rule for column-1 is found after the general rule, column-1 will align left.

    Thread Starter chetandhawan

    (@chetandhawan)

    Thank you for the reply!

    Perfect. Working fine now!Used the below code to left align first column after setting the entire table to centre align:
    .tablepress .column-1 {
    text-align: left;
    }

    Works just fine.

    Have few more issues though. I am trying to change properties of individual tables using the following codes:

    .tablepress-id-40 .row-1 td {
    text-align: center;
    }

    –> for centre aligning header

    .tablepress-id-41 .column-1 {
    background-color: #00AEEF;
    }

    –> for changing background color of coloum

    Also trying to change background color/alignment of individual rows of tables. However, none is working including including the codes mentioned above. Can u plz help.

    vtxyzzy

    (@vtxyzzy)

    Where are the tables you mentioned? Please post links to your site where the problem can be seen.

    Thread Starter chetandhawan

    (@chetandhawan)

    Here’s a link to the page:
    http://mycampusticket.com/exams/engineering/jee-main/

    Table 40 is the one with the heading ‘Prominent Institutes accepting JEE’ while table 41 is the next table on the same page.

    Have tried using the same codes with multiple tables but the problem still persists. So I am guessing that something’s wrong with the code that I am using.

    Regards

    vtxyzzy

    (@vtxyzzy)

    For the first case, the cell is defined using th, not td. Try changing the td to th.

    For the second, there is a rule further down that styles the even/odd rows. That rule is overriding yours. To make your rule take precedence, try adding the !important qualifier:

    .tablepress-id-41 .column-1 {
       background-color: #00AEEF !important;
    }
    Thread Starter chetandhawan

    (@chetandhawan)

    Thanks..Works perfect now. Don’t know why second case wasn’t working because the rule for even/odd rows was at the very beginning. Anyway, adding the !important did the trick!

    Cheers

    vtxyzzy

    (@vtxyzzy)

    I think a more specific rule was overriding the column rule, but still asleep at the wheel!

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

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