CodeIgniter - Как правильно оформить таблицу?(Ширина ячейки) - PullRequest
Новая
       2

CodeIgniter - Как правильно оформить таблицу?(Ширина ячейки)

0 голосов
/ 06 марта 2011

Я понятия не имею, как это сделать, и это очень расстраивает.

Я пробовал это, но ничего не получается. 

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

А также возможно этоможно как-то стилизовать каждый столбец отдельно.Я использую модуль помощника таблиц Code Igniter, поэтому у меня мало доступа к каждому td, tr и т.д ...

Окей, я исправил свою проблему с помощью таблицы 

{
    word-break: break-all;
}

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

Тем не менее я буду вероятнеесоздайте свой собственный класс HTML-таблиц, чтобы в будущем все стало намного проще и более управляемым.

Ответы [ 2 ]

0 голосов
/ 16 марта 2016

Из документации по CI :

Если вы хотите установить атрибуты тега отдельной ячейки, вы можете использовать ассоциативный массив для этой ячейки. Ассоциативный ключ «данные» определяет данные ячейки. Любые другие пары key => val добавляются к тегу как атрибуты key = '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

Не забудьте установить ширину таблицы на 100%, написав примерно так: 

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

Наслаждайтесь.

0 голосов
/ 06 марта 2011

Класс таблицы несколько ограничен в том, что он может и не может делать, как вы, наверное, заметили.

Если вам нужно что-то большее, чем базовая таблица (вы можете установить четные / нечетные классы строк в CI), то вам, вероятно, потребуется создать свой собственный класс таблицы / создать собственный вывод таблицы (это не совсем сложно).

Кроме того, я почти уверен, что генератор таблиц CI будет принудительно увеличивать ширину, если вы не укажете иное с помощью пользовательского шаблона 

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

В результате, даже если вы стилизуете TD, ширина таблицы все равно будет иметь приоритет, если вы хотите и ограничите TD.

Ширина таблицы, равная 100%, будет по-прежнему заполнять всю доступную ширину и заставлять размеры ТД таким образом измеряться, даже если ваш css скажет иначе.

Единственный способ, которым я знаю об этом, это либо полностью исключить ширину из <table>, которая может быть непредсказуемой, либо установить ширину таблицы, равную 200 * number of columns, и все будет хорошо отображаться.

(Если вы добавите inline-block к TD, вы можете увеличить ширину до 200px, но для таблицы td по умолчанию display:table-cell)

...