Multiple Tables & Efficient CSS

  • Author
    Posts
  • #1652425

    cjweber66
    Member

    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.

    #1652642

    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.

    #1652643

    cjweber66
    Member

    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?

    #1652644

    cjweber66
    Member

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

    #1652717

    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.

    #1652718

    cjweber66
    Member

    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

    #1652719

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

The topic ‘Multiple Tables & Efficient CSS’ is closed to new replies.