2011-03-06 94 views
0

我不知道该怎么做,这是非常令人沮丧的。CodeIgniter - 如何正确样式表? (Cell Width)

我试过这个,但它没有做任何事情。

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

而且也或许有可能以某种方式单独的样式每一列。我使用的代码点火器表帮助模块,所以我必须在每个TD,TR等很少有机会...

欧凯,我使用 表

{ 
    word-break: break-all; 
} 

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

固定我的问题我还是会probablt建立自己的HTML Table类使未来变得更容易和更可控。

+0

你的餐桌现在是什么样子,而不是你想要它看起来如何? – Jake 2011-03-06 12:15:46

+0

这与codeIgniter有什么关系? – Shoe 2011-03-06 12:41:31

回答

0

表类在它可以或不可以做的事情上有所限制,因为您可能已经注意到了。

如果您需要比基本表更多的东西(您可以在CI中设置奇偶行类),那么您可能需要创建自己的表类/创建您自己的表输出(这并不困难)。

而且,我敢肯定,CI的表格生成器将迫使宽度,除非你有一个自定义模板

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

结果另行指定,即使你的风格的TD年代,宽度如果你喜欢并限制运输署,仍然会优先考虑。

的100%的表格宽度仍然会填满所有可用的宽度,并迫使TD的被调整到如此的话,即使你的CSS,否则说。

我知道解决这个问题的唯一方法是要么ommit从<table>完全可能是不可预测的,或设置表一样宽200 * number of columns,一切都会很好地显示的宽度。

(如果添加inline-block到TD可以强制宽度200像素,但表TD的,默认情况下是display:table-cell

0

CI documentation

如果你想设置一个单独的单元格的标签属性,您可以为该单元格使用关联数组。关联键'data'定义单元的数据。任何其他键=> val对的形式被添加为重点=“VAL”属性标签:

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

示例代码
让我们假设你在至极有一个表,你想有最后两个栏与编辑和删除链接/图标...你有没有看到过这样的事情?

你可以有一些CSS代码:

.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"); 
} 

你的PHP/CI代码的话,会是这样的:

$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); 

...产生的表的样子此:

enter image description here

不要忘记设置表宽度10 0%写这样的东西:

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

享受。