Tables

HumAnnoyd
HumAnnoyd

How do you change the font color for tables.  Nothing I have tried seems to work. Even the important tag failed.  Grr.

November 2012 CotM:  Dresden Files RPG: The Emerald City

June 2016 CotM:  Star Wars: Rise of the Infinite Empire

June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Cyberpunk Red: Night City

Comments

  • ragnarhawk
    Posts: 131 edited April 2018

    I fear that my CSS-fu is weak, so I tend to brute-force things and use local styling.  That being said, I get help from tools.  One that I found that helped me make tables look the way I want is http://divtable.com/ .  I then copy the css that it generates into the html. 

    e.g.:

    <tr style="background: linear-gradient(#5592bb 0%, #327cad 66%, #1c6ea4 100%); border-bottom: 2px solid #444444; font-size: 15px; font-weight: bold; color: #ffffff; border-left: 2px solid #d0e4f5; height: 25px;">

    The result is, as I said, brute force, but can look decent.

    Post edited by ragnarhawk on
  • HumAnnoyd
    HumAnnoyd
    Posts: 291

    Cool. I will give that a try.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Cyberpunk Red: Night City

  • Johnprime
    Johnprime
    Posts: 252

    Have you tried changing the color on the individual cell? Same style tag, but on the <td tag level. If the styling on the <tr tag level doesn't work, do the <td tag. Course, that means you've got to add it to every cell in the table but if it works!

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • Bortas
    Bortas
    Posts: 645

    Hmm, I also tried handling this only in CSS, and I'm also stumped.

    -bort

  • cgregory
    cgregory
    Posts: 777 edited April 2018

    You can do it only in CSS, but you need to be as specific as the competing CSS which in OP is 

    table tr th, table tr td {

        padding: 0.5625em 0.625em;

        font-size: 0.875em;

        color: #222;

    }

     

    That means you need to do it at the td or th level AND be at least as specific as table tr td (or th)

    table tr td {

    color:blue;

    }

    table tr th {

    color:red;

    }

     

    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • HumAnnoyd
    HumAnnoyd
    Posts: 291

    Oh. Ok.  Thanks. I will give that a try.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Cyberpunk Red: Night City

  • cgregory
    cgregory
    Posts: 777

    As aside, if you want different tables to have different font colors I would suggest giving those tables a class.

    <table class="greentable">

    Then in the CSS you use

    .greentable tr td {

    color:green;

    }

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • HumAnnoyd
    HumAnnoyd
    Posts: 291

    Not working.  Here is my CSS:

    #content table {background-color:transparent;margin-left:auto;margin-right:auto; margin-left:auto;margin-right:auto;font-family:'Orbitron';font-size:120%;font-weight:500;color:#ffffff;line-height:97%;height: 50px;border:3px solid #54bcbd;}

    #content tr:nth-child(even) {background-color:transparent; background-image: none;}

    And her is the code on the actual page:

    <p>

    <div class="center">

    <div class="content table"><table>

    <tr><td>Weapons: +0</td>  

    <td>Maneuver: +0</td>    

    <td>Systems: +1</td>  

    </tr>

    <tr><td>Shields: +1</td>

    <td>Size: +3</td>  

    <td>Stress:000</td>   

    </tr>

    </table>

    </div>

     

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Cyberpunk Red: Night City

  • HumAnnoyd
    HumAnnoyd
    Posts: 291

    I figured it out!  Here is what I ended up with.  I am sure it is redundant and overcoded but it seems like the only way it works.

     

    #content table {background-color:transparent;margin-left:auto;margin-right:auto; margin-left:auto;margin-right:auto;font-family:'Orbitron';font-size:120%;font-weight:500;color:#ffffff;line-height:97%;height: 50px;border:3px solid #54bcbd;}

    #content table tr th, table tr td {background-color:transparent;font-family:'Orbitron';color:#ffffff}

    #content tr:nth-child(even) {background-color: transparent; background-image: none;}

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Cyberpunk Red: Night City

  • cgregory
    cgregory
    Posts: 777

    I was just on the page as you changed it.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

Sign In or Register to comment.

January 2022
Lakes of Blood and Ash

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions