Search code examples
razorhtml-tableblazor

Completely remove border from razor table

I want to make a table in a blazor razor component that has no visible borders at all. I am using it only to order elements.

For example, this is what a table with "border="0"" looks like (taken from the Wetaher service that the Blazor template in Visual Studio starts with):

table example

I want to remove the lines between the rows and between the header and body of the table. I've tried "border="0" cellpadding="0" cellspacing="0"" but it does nothing.

Solution

  • In your default stylesheet file, you can create a custom css class that can override existing bootstrap class.

    .table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
    border: 0;
}

    How To:

    <table class="table table-borderless"></table>

    Note: use border: 0 !important; only if above change is not reflecting.