2011-03-06 95 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); 

享受。