KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Table footer color #1887

Closed Richb201 opened this topic on on Jan 31, 2021 - 6 comments

Richb201 commented on Jan 31, 2021

I have the following in my style

<style>
   th {background-color:royalblue ;
        color:white;}
    tr {color:green;}
    tf {background-color:red ;
        color:white;}
</style>

The header works fine and appears in blue. But the footer does not appear in red. Please tell me why

Table::create(array(
    "dataStore"=>$this->dataStore("srat")->filter("taxyear","=",$_SESSION['last_TY']),
    "showHeader"=>true,
    "showFooter"=>true,
    "columns"=>array(
        "taxyear",
        "employee_email",
        "employee_title",
        "cost_center_name",
        "w2_wages"=>array(
            "cssStyle"=>"text-align:left",
            "prefix"=>"$",
            "footer"=>"sum",
            "footerText"=>"<b>Total Wages:</b> @value"
        ),
        "consultant"=>array(
            "formatValue"=>function($value) {
                return ($value==1)?"Yes":"No";
            }
        ),
        "qualified_dollars"=>array(
            "cssStyle"=>"text-align:right",
            "prefix"=>"$",
            "footer"=>"sum",
            "footerText"=>"<b>Total Wages Qualified:</b> @value"
        )
    ),
    "cssClass"=>array(
        "table"=>"table-bordered table-striped table-hover",
    )
));
KoolReport commented on Jan 31, 2021

You try this for footer:

<style>
tfoot tr {
    background-color:red ;
    color:white;
}
</style>
Richb201 commented on Jan 31, 2021

That does not work on its own. Do I also need to set something in the cssClass?

KoolReport commented on Jan 31, 2021

Okay, let try this:

<style>
    .footerCss {
        background-color:red !important;
        color:white !important;
    }
</style>

and then in the cssClass you do:

"cssClass"=>array(
    "tf"=>"footerCss"
)

Let me know if it works

Richb201 commented on Jan 31, 2021

still not working. Here is my style:

<style>
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-family: inherit;
        font-weight: bold;
        color: inherit;
        text-rendering: optimizelegibility;
    }

    .koolphp-table td {
        font: 13px/20px normal Helvetica, Arial, sans-serif !important;
        color: #4f5155 !important;
    }

    th {background-color:royalblue ;
        color:white;}
    tr {color:green;}
    tf {background-color:red ;
        color:white;}

    .box {
        background-color: lightgrey;
        padding: 15px 25px;
        margin: 10px;

     .footerCss {
         background-color:red !important;
         color:white !important;
     }

</style>

and here is the table

Table::create(array(
    "dataStore"=>$this->dataStore("srat")->filter("taxyear","=",$_SESSION['last_TY']),
    "showHeader"=>true,
    "showFooter"=>true,
    "columns"=>array(
        "taxyear",
        "employee_email",
        "employee_title",
        "cost_center_name",
        "w2_wages"=>array(
            "cssStyle"=>"text-align:left",
            "prefix"=>"$",
            "footer"=>"sum",
            "footerText"=>"<b>Total Wages:</b> @value"
        ),
        "consultant"=>array(
            "formatValue"=>function($value) {
                return ($value==1)?"Yes":"No";
            }
        ),
        "qualified_dollars"=>array(
            "cssStyle"=>"text-align:right",
            "prefix"=>"$",
            "footer"=>"sum",
            "footerText"=>"<b>Total Wages Qualified:</b> @value"
        )
    ),
    "cssClass"=>array(
        "table"=>"table-bordered table-striped table-hover","tf"=>"footerCss"
    )
));
KoolReport commented on Feb 1, 2021

You lack of a blanket in here:

    .box {
        background-color: lightgrey;
        padding: 15px 25px;
        margin: 10px;

     .footerCss {
         background-color:red !important;
         color:white !important;
     }

it should be:

    .box {
        background-color: lightgrey;
        padding: 15px 25px;
        margin: 10px;
    }
     .footerCss {
         background-color:red !important;
         color:white !important;
     }
Richb201 commented on Feb 1, 2021

Yes, I saw that and fixed it, thx

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
solved

None