Need help? Check out our Support site, then


Multiple Tables & Efficient CSS

  1. Hello,

    Can anyone suggest a cleaner method of achieving the following CSS that I currently use for two tables?

    /* 2 Column Table - Left & Justify */
    Table.Table1 {
    border: 1px solid black;
    border-spacing: 0;
    padding: 3px;
    column-width: Auto;
    }

    Table.Table1 th {
    color: #000080;
    text-align: left;
    }

    Table.Table1 tr {
    color: #000000;
    text-align: left;
    }

    Table.Table1 td {
    text-align: justify;
    background-color: white;
    }

    /* 2 Column Table - Center & Center */
    Table.Table2 {
    border: 1px solid black;
    border-spacing: 0;
    padding: 3px;
    column-width: Auto;
    }

    Table.Table2 th {
    color: #000080;
    text-align: center;
    }

    Table.Table2 tr {
    color: #000000;
    text-align: center;
    }

    Table.Table2 td {
    text-align: center;
    background-color: white;
    }

    The blog I need help with is acumidity.com.

  2. Hi, first off, I would suggest against using upper case in CSS as it can mess things up and you can sometimes get inconsistent output. You can combine the two main rules you have since they are identical like the below.

    Table.Table1, Table.Table2 {
    border: 1px solid black;
    border-spacing: 0;
    padding: 3px;
    column-width: Auto;
    }

    The others have some differences, so the way you have organized the rest is probably the best way to go.

  3. G'Day,

    Is any upper case acceptable? I am used to programming camel case, etc, and find that at times it is nicer to read. eg. is "table.cH1" Ok, or should it be "table.ch1"?

    Nice to know I can combine rules.

    I only just settled on one CSS grid table as follows, and then adjust per requirement using <style="text-align:left;color:darkred;"> for example, to override settings.

    /* Table: Grid */
    table.grid {
    border-collapse: collapse;
    border: 1px solid Black;
    font-size:11px;
    column-width: Auto;
    }
    table.grid th {
    border: 1px solid Black;
    padding: 8px;
    background-color: #dedede !important;
    font-size:12px;
    font-weight: strong;
    color: #000000;
    text-align:center;
    }
    table.grid td {
    border: 1px solid Black;
    padding: 8px;
    background-color: #ffffff;
    text-align: justify;
    }

    Q. My only issue is that I cannot seem to override the table background shading effects that the Nuntius theme puts in; I wanted a grey header background and it is always a pinkish colour; the end of each row also incurs a bottom shade of pink?

  4. :) The background actually comes up gray on my iPad! I'll have to investigate why my good computer has an issue...

  5. Is any upper case acceptable? I am used to programming camel case, etc, and find that at times it is nicer to read. eg. is "table.cH1" Ok, or should it be "table.ch1"?

    I always match the case of the HTML elements in the page source, which should all be lower case at WordPress.com. You could try it another way, but if you run into problems then go back to matching the case used in the HTML source.

    I cannot seem to override the table background shading effects that the Nuntius theme puts in; I wanted a grey header background and it is always a pinkish colour; the end of each row also incurs a bottom shade of pink?

    I checked http://acumidity.com/ and I'm not sure which table background header shading you're referring to and I don't see the pinkish colour either. If your'e still having trouble, please reply and link to a page where you are seeing the problem happen.

  6. Thank you very much for your reply :)

    I will review what CSS I have w.r.t case, with your suggestion in mind.

    I found the colour problem . My daughter changed my screen settings for some purpose during her university studies; so it was a hardware issue. Everything appears to be correct now.

    Cheers, Colin

  7. Oh ha! I would have never guessed about the screen settings! Thanks for noting it in a follow-up reply.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags