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

【问题标题】：CodeIgniter - How to style table properly? (Cell Width)CodeIgniter - 如何正确设置表格样式？（单元格宽度）
【发布时间】：2017-07-19 15:35:08
【问题描述】：

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

我试过了，但它什么也没做。

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 类，以使将来的事情变得更容易和更可控。

【问题讨论】：

您的桌子现在的样子与您想要的样子相比如何？
这和codeIgniter有什么关系？

标签： php html css codeigniter css-tables

【解决方案1】：

您可能已经注意到，table 类在可以做什么和不能做什么方面有些限制。

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

另外，我很确定 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，但table td默认为display:table-cell）

【讨论】：

【解决方案2】：

来自CI documentation：

如果您想设置单个单元格的标签属性，您可以为该单元格使用关联数组。关联键“数据”定义单元格的数据。任何其他 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);

...生成的表格如下所示：

不要忘记将表格宽度设置为 100%，这样写：

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

享受吧。

【讨论】：