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

Question

我不知道该怎么做，这非常令人沮丧。

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

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 Table类，以便将来更轻松，更可控。

Answer 1

表类在某些方面受到限制，它可以做到和不能做，因为你可能已经注意到了。

如果你需要的不仅仅是基本表（你可以在CI中设置偶数/奇数行类），那么你可能需要创建自己的表类/创建自己的表输出（这并不是很困难）。 / p>

此外，我非常确定CI的表格生成器会强制宽度，除非您使用自定义模板指定其他方式

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

因此，即使您设置TD的样式，如果您愿意并限制TD，表宽度仍将优先考虑。

100％的表格宽度仍将填充所有可用宽度，并强制TD的大小，即使你的css说不是这样。

我唯一知道的方法就是完全省略<table>的宽度，这可能是不可预测的，或者将表格设置为200 * number of columns的宽度，一切都会很好地显示出来。

（如果您将inline-block添加到TD，则可以将宽度强制为200px，但默认情况下，表格td为display:table-cell）

Answer 2

来自CI documentation：

  

如果要设置单个单元格的标记属性，可以为该单元格使用关联数组。关联键＆＃39;数据＆＃39;定义单元格的数据。任何其他键=＆gt; val对被添加为key =＆＃39; val＆＃39;标签的属性：

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

...结果表格如下：

别忘了将表格宽度设置为100％，写下这样的内容：

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

享受。