如何减少sap.ui.table单元周围的空间

Question

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

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

如您所见，我设法减小了字体大小，并且出于“调试目的”，我将背景更改为红色。

我的Style.css

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

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

我的视图本身具有sapUiSizeCompact类，但我仍然认为周围空间太多，并且由于我有很多列，因此它不适合屏幕。

也许有人遇到了同样的问题，想使更大的表可编辑，并找到了减少不必要空间的解决方案。也许作为一个旁注，它也不需要在非桌面屏幕上运行。 （我尝试从webdynpro abap移至此sapui5应用。）

非常感谢您的提示，并希望学习。也许需要一些jquery来做到这一点？

这里Plunker有点粗糙，没有针对确切的点而量身定做，但是应该使这个点更准确。

Answer 1

通常，我使用UI5的预定义类来添加更多或减少边距/填充。

您可能想给sapUiNoContentPadding和sapUiNoMargin一枪。

Link to documentation for paddingclasses

Link to documentation for margin classes

Answer 2

我不确定标准CSS类是否会对您有所帮助，因为填充是在非常低的级别上生成的。 sap.ui.table.Column没有属性class或styleClass，因此您无法在此处挂接。 sap.ui.table.Table太高。在此应用标准CSS类将影响表本身，而不影响表的列和单元格。

您可以尝试的是为表提供自定义CSS类。

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

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

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

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

结果看起来像这样