How to design table with css border?

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",
            )
        ),
    )
))

KoolReport's Forum

How to design table with css border? #64

Build Your Excellent Data Report