Skip to content

MudSimpleTable: Remove redundant bottom border from the last row header#11628

Merged
danielchalmers merged 1 commit intoMudBlazor:devfrom
9PK4U:MudSimpleTableRemove-redundant-bottom
Jul 18, 2025
Merged

MudSimpleTable: Remove redundant bottom border from the last row header#11628
danielchalmers merged 1 commit intoMudBlazor:devfrom
9PK4U:MudSimpleTableRemove-redundant-bottom

Conversation

@9PK4U
Copy link
Contributor

@9PK4U 9PK4U commented Jul 11, 2025

Description
There is an extra bottom border under the last <th> (row header) in the table. It makes the table look weird.
I changed the CSS so the last row header (<th scope="row">) does not show a bottom border.

Type of change:

  • Bug fix
  • New feature
  • Other

Code sample to show the issue:

<MudSimpleTable Dense Elevation="0">
    <tbody>

    <tr>
        <th scope="row">Row Header A</th>
        <td>Something</td>
    </tr>

    <tr>
        <th scope="row">Row Header B</th>
        <td>Something Else</td>
    </tr>

    <tr>
        <th scope="row">Row Header C</th>
        <td>Something Something</td>
    </tr>
    </tbody>
</MudSimpleTable>

Before:
image_2025-07-10_17-52-43
After:
image_2025-07-10_17-52-43 (2)

Checklist:

  • The PR is submitted to the correct branch (dev)
  • My code follows the code style of this project
  • I've added relevant tests

@github-actions github-actions bot added the bug Unexpected behavior or functionality not working as intended label Jul 11, 2025
@sonarqubecloud
Copy link

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes a visual bug by removing the extra bottom border under the last row header (<th>) in MudSimpleTable.

  • Expanded the CSS selector for tr:last-child to target both <td> and <th> cells.
  • Ensures the bottom border is disabled on the last row header.
Comments suppressed due to low confidence (2)

src/MudBlazor/Styles/components/_simpletable.scss:18

  • There's no test coverage for this visual change. If you have a visual or CSS regression test suite, please add a test to confirm the bottom border is removed for the last row header.
        > td, > th {


> tr:last-child {
> td {
> td, > th {
Copy link

Copilot AI Jul 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The selector now removes the bottom border for all elements in the last row. Consider targeting only row headers (e.g., > th[scope=\"row\"]) to avoid unintentionally affecting other header cells or future markup.

Suggested change
> td, > th {
> td, > th[scope="row"] {

Copilot uses AI. Check for mistakes.
@n0spaces
Copy link
Contributor

Looks good! This is how MudTable handles the bottom border, so this change makes sense.

https://try.mudblazor.com/snippet/mYmTOVFHEzqANhrW

image

@danielchalmers danielchalmers merged commit d131be5 into MudBlazor:dev Jul 18, 2025
7 checks passed
@danielchalmers
Copy link
Member

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants