KoolReport's Forum

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

How to design table with css border? #64

Open tee opened this topic on on Aug 7, 2017 - 2 comments

tee commented on Aug 7, 2017

Hi KoolReport,

Is it possible to create a table with css border as shown below by using KoolReport? I have applied

<style>
            .color 
            {
                border: 1px solid black;
            }
</style>

on the top of report.view, but it didn't work. Thanks.

KoolReport commented on Aug 7, 2017

Hi, making the css style like you above code is one step. The second step is to apply to the table:

"cssClass"=>array(
    "table"=>"color"
)

Above code will apply .color style into the <table> tag.

In your above table, you should use the the custom function to set css class for "td" and "th" since the border of "Oranges" and "% of orange" is different.

"td"=>function($row,$columnName)
{
    if($columnName=="orange_percent")
    {
        return "css_class_to_make_left_border_lightgray";
    }
},
"th"=>function($columnName)
{
    if($columnName=="orange_percent")
    {
        return "css_class_to_make_left_border_lightgray";
    }
},

Best regards

KoolReport commented on Aug 7, 2017

Email me, I will send you a new Table widget with ability to set css style directly on columns:

Table::create(array(
    "columns"=>array(
        "orange"=>array(
            ...
            "cssStyle"=>"border-right:none;"
        ),
        "orange_percent"=>array(
            ...
            "cssStyle"=>"border-left:none;"
        ),
    )
))

or it can be set by its components:

Table::create(array(
    "columns"=>array(
        "orange"=>array(
            ...
            "cssStyle"=>array(
                "th"=>"text-align:center",
                "td"=>"text-align:left",
                "tf"=>"text-align:right",
            )
        ),
    )
))

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
help needed

None