标准报表列的 Oracle Apex 控件 CSS 布局答案

【问题标题】：Oracle Apex control CSS layout for Standard Report Columns标准报表列的 Oracle Apex 控件 CSS 布局
【发布时间】：2015-05-08 18:27:00
【问题描述】：

我有一个 ApEx 报告，我需要以不同方式自定义列的 css 宽度。为此，我在报告中使用了 CSS Class 属性：

分配的 CSS 类如图所示：WideColumn

而在应用程序页面的 HTML 标头 中：

<style type="text/css">
.WideColumn {
min-width:100px;
}
</style>

这没有生效。其实无论分配什么css属性，都不会生效。

我不想使用 CSS Style 部分来指定

 'display:block;min-width:100px;'

由于某些限制。
我在列属性中遗漏了什么？
我也尝试过用引号括起来的 CSS 类：'WideColumn' 请提出建议。

【问题讨论】：

您使用什么主题和报告模板？
我正在使用自定义模板和主题。在模板中，我已经为报告的（表）数据（td）和标题（th）定义了宽度，但是我需要为这个特定的列分配一个 css 类，并添加更多属性。
是报表行还是报表列模板？
它是一个报表行模板..类似于标准报表模板

标签： css oracle-apex

【解决方案1】：

自定义行模板无法处理 CSS 类定义。 “列格式”下的 CSS 通常会生成一个带有类设置的 span 元素，而不是 td 元素。为元素本身设置“元素 CSS 类”并不总是有帮助。如果您的列类型是“标准报告列”，则不会创建额外的 html。
您也无法选择在模板本身中提供替换字符串来创建一些输出。
你可以

在源查询中添加一个额外的列，该列将包含一个类。使用行模板中的列标题添加此自定义类。
或者在 html 表达式中使用 class 列要更改的列。与标准输出类似，您可以使用 <span class="#CLASSCOL#">#MYCOL#</span> 生成该 html。
使用 CSS 定位生成的列。例如，如果您的模板在td 元素上生成th 元素和headers 属性（就像在标准报告中一样），您可以更多地定位这些列比摆弄类或 html 表达式更容易。你可能需要调整模板，但通常应该是有益的。

【讨论】：

我能够向该元素添加一个跨度（您建议的第二个替代方案），并且 css 正在为该跨度工作。但由于这个跨度在报告列内，我无法为报告的 td 和 th 解决这个问题..
@pratham 是否有必要对 TD 或 TH 元素应用一些东西？通过设置跨度的宽度，您也会将 TD 推开。
我的模板中有一个 #COLUMN_HEADER#，它创建了一个完全不同的区域，剪切-从列属性关闭..（实际上我使用的是没有标题冻结模板的 Apex 4.1，所以这个模板是从 4.2 复制的，但没有给出所需的对齐方式..）第二个选项似乎是方式对于这个问题。

【解决方案2】：

您可以使用 APEX 中内置的 jQuery 库使用一些 Javascript 来完成此操作。

（警告：我的 Javascript 不是世界上最优雅的！）

这对我有用：

1) 在页面的“函数和全局变量声明”属性中创建这个函数：

function setColWidths(colId) {
    var maxWidth = 0;
    $('th#'+colId).each (function (index) {
        w = $(this).width();
        maxWidth = Math.max(maxWidth,w);
        });
    $('th#'+colId).each (function (index) {
        $(this).width(maxWidth);
        });
}

2）在页面的“页面加载时执行”属性中为每一列调用函数：

setColWidths('COL01');
setColWidths('COL02');
setColWidths('COL03');

【讨论】：