如何减少 sap.ui.table 单元格周围的 space

Question

我尝试减小输入字段周围 sap.ui.table 中单元格的大小。

在下面的屏幕截图中，您可以看到我要减少的部分以绿色标记。

如您所见，我设法减小了字体大小，并且 "debugging purpose" 我将背景更改为红色。

我的Style.css:

.test_maybe_he input {
   font-size: 0.75em !important;
   background-color: #ff0000 !important;
   padding-left: 0px !important;
   margin-left: 0px;
}

我尝试了负边距，但它只将输入字段的内容而不是输入字段本身移到左侧。

我的视图本身有 class sapUiSizeCompact，但我仍然认为周围有太多 space，而且由于我有很多列，它不适合屏幕。

也许有人遇到了同样的问题，想要制作更大的 table editable，并找到了减少不必要的 space 的解决方案。也许作为一个旁注，它也不需要在非桌面屏幕上工作。（我尝试从 webdynpro abap 转移到这个 sapui5 应用程序。）

感谢您的提示，并希望学习。也许需要 jQuery 才能做到这一点？

这里Plunker有点粗略，没有切中要点，但应该能说明问题。

Answer 1

我不确定标准 CSS classes 是否对您有帮助，因为填充是在非常低的水平上生成的。 sap.ui.table.Column 没有属性 class 或 styleClass，所以你不能在那里挂钩。 sap.ui.table.Table 级别太高。在那里应用标准 CSS class 会影响 table 本身，而不是它的列和单元格。

您可以尝试为您的 table 自定义 CSS class.

<t:Table id="table0"
    ...
    class="myVeryCompactTable">

然后您可以删除 CSS 文件中的填充

.myVeryCompactTable.myVeryCompactTable .sapUiTableCellInner {
    padding: 0;
}

我用了两次myVeryCompactTable来增加特异性（所以我不需要!important）。您可以使用其他方法来提高特异性。

结果如下所示

如何减少 sap.ui.table 单元格周围的 space

How to reduce the space around an sap.ui.table cell

css

sapui5