[Table]: Remove padding under last item of table

[vicslavova]

Bug Description

Tables look like they have a double border because of the border of the last item + the padding under it.

Closeup:

Affected Component

No response

Expected Behaviour

There shouldn't be a padding under the last table item. This can also be seen in the Fiori Visual Guideline wiki.

Isolated Example

No response

Steps to Reproduce

1. 2. 3. ...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.92

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[ilhan007]

Hi @vicslavova do you find the padding in this basic Table sample from version 1.24. I could not find a padding coming from the last TableRow.

By the way we don't have version 1.92 (maybe you meant 1.9.2 or?).

BR, ilhan

[mrCherry97]

hi @ilhan007 we want to use a Table inside the panel because our spec says that it needs to have rounded corners and additional things, so it will be lovely to have a property or some suggestion on how to easily fix that to not have the line in the last row in the Table.

Package version which we are using:

    "@ui5/webcomponents": "^1.24.0",
    "@ui5/webcomponents-base": "^1.24.0",
    "@ui5/webcomponents-fiori": "^1.24.0",
    "@ui5/webcomponents-react": "~1.28.1",
    "@ui5/webcomponents-react-base": "^1.28.1",

Example of the implementation from the Kyma-dashboard:

    <Panel
      title={title}
      headerActions={!headerActionsEmpty && headerActions}
      data-testid={testid}
      disableMargin
      style={disableMargin ? {} : spacing.sapUiSmallMargin}
    >
      <Table
        className={`ui5-generic-list ${hasDetailsView ? 'cursor-pointer' : ''}`}
        onRowClick={e => {   }}
        columns={
          <HeaderRenderer
            entries={entries}
            actions={actions}
            headerRenderer={headerRenderer}
            disableHiding={disableHiding}
            displayArrow={displayArrow}
            noHideFields={noHideFields}
          />
        }
      >
        {renderTableBody()}
      </Table>
    </Panel>

Screenshot of the example:

Thank you so much for your attention and participation.

Best regards, WM

[ilhan007]

I see, so it's not that the Table has padding under last row, this is just the space between the Table and the Panel, which is fine and expected. To remove the border of the last row I believe you can use pure css, targeting the last row:

ui5-table ui5-table-row:last-child {
            border: none; /* Example style */
}