CodeIgniter - 如何正确设置表格样式？ （单元格宽度）

I have no idea how to do that and it is very frustrating.

I've tried this, but it doesn't do anything.

table td
{
    table-layout: fixed;
    width: 200px;
    word-wrap:break-word;
}

And also maybe it is possible to somehow style every column separately. I'm using Code Igniter table helper module so I have little access over each td, tr etc...

Okey, I fixed my problem using table

{
    word-break: break-all;
}

td
{
    padding-left: 6px;
    padding-right: 6px;
    max-width: 500px;
    min-width: 100px;
}

Still I will probablt build my own HTML Table class to make things much easier and more controllable in future.

The table class is somewhat limited in what it can and can't do as you've probably noticed.

If you need anything more than the basic table (you can set even/odd row classes in CI), then you will likely need to create your own table class/create your own table output (it's not exactly difficult).

Also, I'm pretty sure CI's table generator will force a width, unless you specify otherwise with a custom template

$tmpl = array (
'table_open'   => '<table border="0" width="XXX" cellpadding="4" cellspacing="0">',

As a result, even if you style the TD's, the table width will still take priority if you like and confine the TDs.

A table width of 100% will still fill all the available width and force the TD's to be sized that way, even if your css says otherwise.

The only way I know around this is to either ommit the width from the <table> entirely which could be unpredictable, or set the table to be as wide as 200 * number of columns, and everything will display nicely.

(If you add inline-block to the TD you can force the width to 200px, but table td's, by default are display:table-cell)

From CI documentation:

If you would like to set an individual cell's tag attributes, you can use an associative array for that cell. The associative key 'data' defines the cell's data. Any other key => val pairs are added as key='val' attributes to the tag:

$cell = array('data' => 'Blue', 'class' => 'highlight', 'colspan' => 2);  
$this->table->add_row($cell, 'Red', 'Green');

Sample code
Lets suppose you have a table in wich you want to have two last columns with edit and delete links/icons... have you seen something like this before?

You could have some css code like this:

.table_cell_bgimage{
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

 .edit_table_cell_bgimage{
    background-image: url("path_to_img/edit.jpg");  
}

.delt_table_cell_bgimage{
    background-image: url("path_to_img/delt.jpg");  
}  

Your php / CI code, then, will look like this:

$this->load->library('table');
$edit_cell = array('class' => "table_cell_bgimage edit_table_cell_bgimage");
$delt_cell = array('class' => "table_cell_bgimage delt_table_cell_bgimage");

$table_data = array(
    array('v1', 'v2', 'v3', 'v4', 'v5', $edit_cell, $delt_cell),
    array('v1', 'v2', 'v3', 'v4', 'v5', $edit_cell, $delt_cell),
    array('v1', 'v2', 'v3', 'v4', 'v5', $edit_cell, $delt_cell),
    array('v1', 'v2', 'v3', 'v4', 'v5', $edit_cell, $delt_cell),
    array('v1', 'v2', 'v3', 'v4', 'v5', $edit_cell, $delt_cell),
    array('v1', 'v2', 'v3', 'v4', 'v5', $edit_cell, $delt_cell)
); 

$data['table'] = $this->table->generate($table_data);

... and the resulting table will look like this:

Dont forget to set table width 100% writing something like this:

$tmpl = array ( 'table_open'  => '<table style="width:100%">' );
$this->table->set_template($tmpl);

Enjoy.